因业务需求需实现图片或视频批量上传的功能 结果发现一个坑
<template>
<el-upload
action="https://up-cn-east-2.qiniup.com"
multiple
:data="qiniuOthData"
:headers="uploadHeaders"
:before-upload="beforeOthUpload"
:on-success="onOthSuccess"
:on-remove="handleRemove"
:on-error="onError"
:accept="'image/*,video/*'"
list-type="picture-card"
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">上传视频、图片文件</div>
</el-upload>
</template>
<script>
export default {
data(){
return{
fileList:[],
files:[]
}
},
methods:{
onError(res){
console.log(this.uploadHeaders)
console.log(this.qiniuDataPic)
console.log(this.qiniuOthData)
},
beforeOthUpload(file) {
console.log(file)
this.qiniuOthData.key = new Date().getTime(); // key为上传后文件名 必填
},
onOthSuccess(res, file,fileList) {
console.log(res,file,fileList)
console.log(this.goodsForm.comHeadUrls)
console.log(this.files)
let a={
name:`http://orther.kangruijk.com/` + res.key,
url:`http://orther.kangruijk.com/` + res.key
}
this.files.push(a)
}
}
}
</script>
el-upload组件file-list绑定的数组不可以手动修改它不然会报开头的错误
所以在:on-success方法中使用另一个数组来存放文件