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.url this.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 = this if (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.imgUrl this.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 = url a.download = item.fileName a.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>