手动上传表单数据 + 图片文件功能

在很多项目中都会有上传数据+图片的需求，我最近在项目中负责活动发布的板块，需要几个表单数据加两个图片和一个图片数组，我看到产品需求后头就很大，我之前没有做过相关的业务，所以这几天一直在尝试，看到接口文档我内心已经崩了。

功能要求

要求是一组活动图片，不超过四张，一张活动封面，一张群聊二维码，以及若干的表单数据，最后通过表单形式的 post 请求，所以我分别采用了 element-upload 不同的上传组件，并和表单结合通过el-form-item来进行 upload 和表单排版统一。

思考

1. 因为需要手动上传，所以我们需要考虑怎么将表单数据和二进制文件放在一起

2. 我们从哪里拿到图片的二进制

3. 图片在页面的预览显示靠什么

功能实现

图片预览

在刚开始使用钩子尝试拿到上传的 file，但是打印出来的 file 并没有任何作用，所以通过尝试，拿到 file 中的 url，通过 url 进行图片绑定，即完成预览。

之后注意到了 url 中开头的 blob 这个字段，所以上网查了一下，其表示二进制类型的大对象，虽然后续没看懂，但是大概明白了它的意思，于是乎后来我就出现了一个致命错误。

拿到二进制流

我拿到 blob 后，以为可以通过它来获取二进制，从而百度了一上午，没有任何解决方案，二进制到底在哪里呢，我忽略了我最初拿拿到 blob 的地方就是通过钩子拿到的 file，我通过打印 file 类型，和其他相关的参数，最后终于找到了二进制流文件，即file.raw起初以为它只是个个普通的对象。

手动上传

最后就是手动上传的问题，我们可以通过在请求发送前 new 一个formdata然后将表单按文档顺序append进去，还有我们的三组图片，最后直接通过我们封装的 axios 发送请求就可以了

const params = new FormData()      params.append('name', this.form.name)      params.append('socName', this.form.socName)      params.append('school', this.form.school)      params.append('backImg', this.backimg)      params.append('startTime', this.form.startTime)      params.append('endTime', this.form.endTime)      params.append('select', this.form.select)      params.append('intro', this.form.intro)      this.List.forEach((x, index) => {        console.log(this.fileList)        console.log(x.url)        console.log(index)        params.append('file_' + index, x)      });

最后

功能实现可能还是有些问题，但是能跑起来是我最大的成功，希望看到的打咯可以指点一下我其他更好的方案去实现这个功能，希望大佬能不吝赐教！！！下面是这个项目的 gitee 地址，有兴趣的大佬可以去指点指点，小弟我还在努力学习 ing！！！传送门