前言
最近遇到一个很棘手的问题，就是需要上传多个图片或视频文件，我一直陷在数组里面无法自拔，正如我们所知，上传一张图片，formdata的格式是这样的，
从这里我们可以联想到多张图片应该也是要这样子传的，一开始就陷入在数组的坑里，来来回回，各种尝试，终于出现了真的的结果多张图片应该张下面这样
具体代码
只能上传jpg/png/mp4文件，且不超过20Mb
</template>
<script>
export default {
data () {
return {
imgList: [],
addForm: {
files: []
}
}
},
methods: {
handleRemove (files, fileList) { // 用户删除已上传图片
this.addForm.files.map((item, index) => {
if (item.uid === files.uid) {
this.addForm.files.splice(index, 1)
}
})
},
handleExceed (files, fileList) { // 限制用户上传的文件数
this.$message.warning(`当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
},
handleBeforeUpload (file) { // 用户上传文件时先检测文件大小格式为b->kb->Mb
if (file.size > 20 * 1024 * 1024) {
this.$message({
type: 'warning',
message: '选择文件过大啦~~'
})
return false
}
},
handleUpload (data) { // 用户上传成功的值赋给表单
this.addForm.files.push(data.file)
// this.addForm.files = data.file 当只需要上传一张图片时
},
handleSave () { // 确定保存接口与其他表单数据一起传
let formData = new FormData()
this.addForm.files.map(item => {
formData.append('files', item) // 最重要的一步，历史性的一步
})
}
}
}
</script>