Dynamic addition of El upload upload component; El upload dynamically uploads files; El upload distinguishes which component uploads the file.

demand ： Normally, we upload a fixed file to a fixed back-end field .
But you may encounter , such Customize and add multiple upload components , That is, traverse multiple same upload components like an array

At this point, I encounter a problem ： Because it is the upload component that comes out of traversal , It leads to successful upload :on-success、 change :on-change、 Delete :on-remove All in the same way , So how do you know which component the file just uploaded belongs to

resolvent ： In template html When , combination function Function of , First, traverse the j Subscript return To the corresponding successful methods , And then in methods When , stay return Out of the corresponding method , By subscript j Identify the content that will be uploaded successfully （ Image name 、url、id etc. ） Save in the corresponding field .
.
: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)}"

The following code can be copied directly , But we need to pay attention to uploadImgURL Change to your own image upload interface

<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=" Upload attachments ：">
            <span style="color: #1890ff; cursor: pointer;" @click="addFileArr">
              <i class="el-icon-plus"></i>
               Add self named attachments 
            </span>
          </el-form-item>
        </el-col>

        <!--  This is a fixed upload  -->
        <el-form-item label-width="150px" label=" Payment application code / Payment code ：" 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"  Cancel the original document display   Show below template Show the documents written by yourself in  -->
                <i class="el-icon-plus"></i>
                <div class="el-upload__text">
                   Drag files here , or <em> Click upload ( Less than 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>

        <!--  Traverse multiple  -->
        <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"  Cancel the original document display   Show below template Show the documents written by yourself in  -->
                <i class="el-icon-plus"></i>
                <div class="el-upload__text">
                   Drag files here , or <em> Click upload ( Less than 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>

    <!--  Preview  -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script> import {
       G_CGI_PHP } from "api/api" //  Introduce backend api Address of the interface  export default {
       data () {
       return {
       ruleFormContract: {
      }, uploadImgURL: G_CGI_PHP.group.documentUpload,// Interface for uploading files to the backend ------------------- You need to replace it with your own  // 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} ], // Upload the image and store it in the array   The value traversed and displayed by the front end  newImgElemenArr: [ // { newname: '', newfilePayListName: [], newshowImageArr: [] }// The names are （ Send it to the backend to know which attachment name ）, Upload binding （ Probably not ）, Image array （ Picture information sent to the backend ） ],// Dynamically add new attachment upload components  } }, methods: {
       addFileArr () {
       let name1 = ' The attachment ' + (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, " preview ") this.dialogImageUrl = file.url this.dialogVisible = true }, beforePayUp (file) {
       console.log(' Before uploading ', file) if ((file.size / 1024 / 1024) >= 2) {
       this.$message.warning(' The file must be less than 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, " Document change ") 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(' Upload successful ', res, file) // console.log(" Business license uploaded successfully ：file Format ---", file.raw,) // console.log(' Picture address ', 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: " Upload failed , Please upload again !", type: "error", }) } }, handlePayRemove (file, fileDataList, j) {
       console.log(file, fileDataList, j, " Delete picture ") 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)) {
       //  The picture is a preview  this.dialogImageUrl = item.imgUrl this.dialogVisible = true } else {
       //  Other files are downloaded  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; } //  The following is how to deal with the pop-up  .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>