实现手动上传表单数据+图片文件

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

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

功能要求

要求是一组活动图片，不超过四张，一张活动封面，一张群聊二维码，以及若干的表单数据，最后通过表单形式的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！！！