el-upload上传组件的动态添加；el-upload动态上传文件；el-upload区分文件是哪个组件上传的。

需求：正常我们上传都是一个固定的文件传到固定的后端字段里去。
但是有可能遇到，这种自定义新增多个上传组件，也就是遍历数组似的多个同样的上传组件

此时就遇到一个问题：因为是遍历出来的上传组件，导致上传成功:on-success、改变:on-change、删除:on-remove都是用的同样的方法，那么怎么知道刚才上传的这个文件是属于哪个组件的呢

解决方法： 在模板html的时候，结合function的函数，先将遍历的 j 下标return到对应的成功方法里，然后在methods时候，在return出来的对应的方法里，通过下标 j 标识将上传成功的内容（图片名称、url、id等）存入对应的字段中。
.
:on-remove="(file, file_list)=>{handlePayRemove(file, file_list, j)}"
:on-change="(file, file_list)=>{return filePayChange(file, file_list, j)}"
:on-success="(response, file, file_list)=>{return msgPaySuccess(response, file, file_list, j)}"

以下代码可以直接复制使用，但是需要注意将 uploadImgURL 换成自己的图片上传接口

<template><div class="order"><el-form :model="ruleFormContract" ref="ruleFormContract" label-width="130px" class="demo-ruleFormContract"><el-row><el-col :span="24"><el-form-item label="上传附件："><span style="color: #1890ff; cursor: pointer;" @click="addFileArr"><i class="el-icon-plus"></i>添加自命名附件</span></el-form-item></el-col><!-- 这是固定的上传 --><el-form-item label-width="150px" label="付款申请码/付款码：" prop="hetongwenjian" class="img_all_box_item"><div><el-upload class="upload-demo" style="backgroundColor:#fff;width: 360px;":action="uploadImgURL":file-list="filePayListFukuanma"ref="msgPayUpload":on-preview="handlePictureCardPay":before-upload="beforePayUp":on-change="(file, file_list)=>{return filePayChange(file, file_list, 'filePayListFukuanma')}":on-success="(response, file, file_list)=>{return msgPaySuccess(response, file, file_list, 'filePayListFukuanma')}":on-remove="(file, file_list)=>{return handlePayRemove(file, file_list, 'filePayListFukuanma')}":show-file-list="false"drag:multiple="true":limit="2000"><!-- :show-file-list="false" 取消原自带的文件展示 展示下方template里自己写的文件展示 --><i class="el-icon-plus"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传(需小于2M)</em></div></el-upload></div><template><div style="float:left;" v-for="(item,index) in showImageArrFukuanma" :key="index"><span class="span_box" style="border:1px solid #ccc;display:inline-block;border-radius: 5px;" @click="showBigImg(item)"><img v-if="(item.fileName.indexOf('.png')>=0)||(item.fileName.indexOf('.jpg')>=0)||(item.fileName.indexOf('.jpeg')>=0)" style="width:50px;height:50px;cursor: pointer;" :src="item.imgUrl" alt=""><img v-else style="width:50px;height:50px;cursor: pointer;" src="../../../static/file.png" alt=""><span>{{item.fileName}}</span><i class="el-icon-close" style="cursor: pointer;margin-left:5px;" @click.stop.prevent="deleteImgOne(item,'filePayListFukuanma')"></i></span></div></template></el-form-item><!-- 遍历多个 --><template v-for="(ele,j) in newImgElemenArr"><el-form-item label-width="150px" :key="j" prop="hetongwenjian" class="img_all_box_item img_all_box_arr"><el-input style="float:left;width: 150px;" v-model="ele.newname"></el-input><i class="el-icon-delete" style="float:left;margin: 10px 10px;" @click="delzdyArr(j)"></i><div><el-upload class="upload-demo" style="backgroundColor:#fff;width: 360px;":action="uploadImgURL":file-list="ele.newfilePayListName"ref="msgPayUpload":on-preview="handlePictureCardPay":before-upload="beforePayUp":on-change="(file, file_list)=>{return filePayChange(file, file_list, j)}":on-success="(response, file, file_list)=>{return msgPaySuccess(response, file, file_list, j)}":on-remove="(file, file_list)=>{handlePayRemove(file, file_list, j)}":show-file-list="false" drag:multiple="true":limit="2000"><!-- :show-file-list="false" 取消原自带的文件展示 展示下方template里自己写的文件展示 --><i class="el-icon-plus"></i><div class="el-upload__text">将文件拖到此处，或<em>点击上传(需小于2M)</em></div></el-upload></div><template><div style="float:left;" v-for="(item,index) in ele.newshowImageArr" :key="index"><span class="span_box" style="border:1px solid #ccc;display:inline-block;border-radius: 5px;" @click="showBigImg(item)"><img v-if="(item.fileName.indexOf('.png')>=0)||(item.fileName.indexOf('.jpg')>=0)||(item.fileName.indexOf('.jpeg')>=0)" style="width:50px;height:50px;cursor: pointer;" :src="item.imgUrl" alt=""><img v-else style="width:50px;height:50px;cursor: pointer;" src="../../../static/file.png" alt=""><span>{{item.fileName}}</span><i class="el-icon-close" style="cursor: pointer;margin-left:5px;" @click.stop.prevent="deleteImgOne(item,j)"></i></span></div></template></el-form-item></template></el-row></el-form><!-- 预览图 --><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt="" /></el-dialog></div>
</template><script>
import { G_CGI_PHP } from "api/api" // 引入后端的api接口地址
export default {data () {return {ruleFormContract: {},uploadImgURL: G_CGI_PHP.group.documentUpload,//上传文件后端给的接口-------------------需要替换成你自己的// uploadImgURL: 'https://jsonplaceholder.typicode.com/posts/',dialogImageUrl: "",dialogVisible: false,filePayListFukuanma: [],showImageArrFukuanma: [// {fileName:'aaa.png',fileId:'21909489392392',imgUrl:G_CGI_PHP.group.documentDownload + `?id=` + res.data}], //上传图后存入数组 前端遍历和展示的值newImgElemenArr: [// { newname: '', newfilePayListName: [], newshowImageArr: [] }//分别是名称（传给后端知道哪个附件名），上传绑定（估计用不到），图片数组（传给后端的图片信息）],//动态新增加的附件上传组件}},methods: {addFileArr () {let name1 = '附件' + (this.newImgElemenArr.length + 1)this.newImgElemenArr.push({ newname: name1, newfilePayListName: [], newshowImageArr: [] })},delzdyArr (j) {this.newImgElemenArr = this.newImgElemenArr.filter((ele, index) => {return index != j})},handlePictureCardPay (file) {console.log(file, "预览")this.dialogImageUrl = file.urlthis.dialogVisible = true},beforePayUp (file) {console.log('上传前', file)if ((file.size / 1024 / 1024) >= 2) {this.$message.warning('文件需小于2M')return false}},filePayChange (file, fileDataList, j) {const loading = this.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})console.log(file, fileDataList, j, "文件改变")if (j == 'filePayListFukuanma') {this.filePayListFukuanma = fileDataList} else {for (let h = 0; h < this.newImgElemenArr.length; h++) {const element = this.newImgElemenArr[h]if (h == j) {this.newImgElemenArr[h].newfilePayListName = fileDataList}}}setTimeout(() => {loading.close()}, 2000)},msgPaySuccess (res, file, file_list, j) {console.log('上传成功', res, file)// console.log("营业执照上传成功：file格式---", file.raw,)// console.log('图片地址', URL.createObjectURL(file.raw))const _vm = thisif (res.success) {if (j == 'filePayListFukuanma') {this.showImageArrFukuanma.push({ fileName: file.name, fileId: res.data, imgUrl: G_CGI_PHP.group.documentDownload + `?id=` + res.data })} else {for (let h = 0; h < this.newImgElemenArr.length; h++) {const element = this.newImgElemenArr[h]if (h == j) {this.newImgElemenArr[h].newshowImageArr.push({ fileName: file.name, fileId: res.data, imgUrl: G_CGI_PHP.group.documentDownload + `?id=` + res.data })}}}} else {_vm.$message({message: "上传失败,请重新上传!",type: "error",})}},handlePayRemove (file, fileDataList, j) {console.log(file, fileDataList, j, "删图")if (j == 'filePayListFukuanma') {this.filePayListFukuanma = fileDataList} else {for (let h = 0; h < this.newImgElemenArr.length; h++) {const element = this.newImgElemenArr[h]if (h == j) {this.newImgElemenArr[h].newfilePayListName = fileDataList}}}},showBigImg (item) {if ((item.fileName.indexOf('.png') >= 0) || (item.fileName.indexOf('.jpg') >= 0) || (item.fileName.indexOf('.jpeg') >= 0)) {// 图片是预览this.dialogImageUrl = item.imgUrlthis.dialogVisible = true} else {// 其他文件是下载const x = new window.XMLHttpRequest()x.open('GET', item.imgUrl, true)x.responseType = 'blob'x.onload = () => {const url = window.URL.createObjectURL(x.response)const a = document.createElement('a')a.href = urla.download = item.fileNamea.click()}x.send()}},deleteImgOne (item, j) {console.log(item, j)if (j == 'filePayListFukuanma') {this.showImageArrFukuanma = this.showImageArrFukuanma.filter(ele => {return ele != item})this.filePayListFukuanma = this.filePayListFukuanma.filter(ele => {return ele.name != item.fileName})} else {for (let h = 0; h < this.newImgElemenArr.length; h++) {const element = this.newImgElemenArr[h]if (h == j) {console.log(h, j, item)this.newImgElemenArr[h].newshowImageArr = this.newImgElemenArr[h].newshowImageArr.filter(ele => {return ele != item})this.newImgElemenArr[h].newfilePayListName = this.newImgElemenArr[h].newfilePayListName.filter(ele => {return ele.name != item.fileName})}}}},},
}
</script><style lang="less" scoped>
.order {padding: 20px;/deep/.el-dialog__body {padding-top: 0px;padding-bottom: 20px;}// 以下是处理弹框.el-form-item__content {width: 100% !important;.el-select {width: 100%;}.el-date-editor {width: 100%;}}/deep/.bottom_box {text-align: center;.el-form-item__content {margin-left: 0 !important;}}.el-col {// background-color: #1fff;// border: 1px solid #ddd;// min-height: 62.62px;min-height: 65.62px;}.span_box {padding: 10px;box-sizing: border-box;height: 80px;overflow: hidden;margin-left: 10px;img {float: left;margin-top: 5px;}span {float: left;margin-top: 10px;}i {float: left;margin-top: 24px;}}.bor_box {margin-left: 50px;margin-bottom: 10px;overflow: hidden;position: relative;/deep/.el-col-2 {margin-top: 32px;}/deep/.el-col-6 {top: 25px;position: relative;}.box4_div {border: 1px solid #ddd;overflow: hidden;height: 93px;padding-right: 50px;}.name_span {position: absolute;right: -18px;top: 0px;}.el-icon-delete {margin-left: 20px;margin-top: 3px;cursor: pointer;}}.num_input {width: fit-content;/deep/.el-input-number__decrease,/deep/.el-input-number__increase {display: none !important;}/deep/.el-input__inner {padding: 0 !important;text-align: left;padding-left: 10px !important;}}/deep/.pos_box {position: relative;span {position: absolute;top: 0px;}}.img_all_box_item {width: 100%;overflow: hidden;padding-top: 15px;/deep/.el-form-item__label {margin-top: 20px;}/deep/.upload-demo {float: left !important;// background-color: #1fff !important;padding: 0 !important;height: 80px !important;line-height: 80px !important;.el-icon-plus {float: left !important;margin: 32px 0 0 12px !important;}.el-upload-dragger {height: 80px !important;}}}.img_all_box_arr {margin-left: 10px;/deep/.el-form-item__content {margin-left: 0 !important;}}
}
</style>