「这是我参与2022首次更文挑战的第25天，活动详情查看：2022首次更文挑战」
手动上传表单数据+图片文件功能
在很多项目中都会有上传数据+图片的需求，我最近在项目中负责活动发布的板块，需要几个表单数据加两个图片和一个图片数组，我看到产品需求后头就很大，我之前没有做过相关的业务，所以这几天一直在尝试，看到接口文档我内心已经崩了。
功能要求
要求是一组活动图片，不超过四张，一张活动封面，一张群聊二维码，以及若干的表单数据，最后通过表单形式的post请求，所以我分别采用了element-upload不同的上传组件，并和表单结合通过el-form-item来进行upload和表单排版统一。
思考
- 因为需要手动上传，所以我们需要考虑怎么将表单数据和二进制文件放在一起
- 我们从哪里拿到图片的二进制
- 图片在页面的预览显示靠什么
功能实现
图片预览
在刚开始使用钩子尝试拿到上传的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！！！ 传送门