背景
项目中需要上传轮播图,每个轮播图需要自己上传文件和其他配置信息。
通过on-success钩子函数来对文件列表进行控制,需要知道当前操作文件列表的序号,这就需要添加一个index的自定义参数
html
<el-form-item v-for="(banner, index) in formBannerList" label="">
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:file-list="formBannerList"
:on-success="(response,file, fileList)=>uploadBannerSuccess(response,file, fileList, index)"
:before-upload="beforeBannerUpload">
<img v-if="banner.file_url" :src="banner.file_url">
<i v-else class="el-icon-plus avatar-uploader-icon flex-cc"></i>
</el-upload>
</el-form-item>
js
formBannerList: [
{
file_url: '',
jump_type: '',
jump_url: '',
serial_number: 1,
}
],
uploadBannerSuccess(res,file, fileList, index){
let fileUrl = URL.createObjectURL(file.raw);
this.formBannerList[index].file_url = fileUrl;
},