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

最新推荐文章于 2024-05-13 14:56:54 发布
最新推荐文章于 2024-05-13 14:56:54 发布
阅读量3.6k 收藏 24
点赞数 3
分类专栏： element-ui 文章标签： el-upload动态添加 el-upload动态上传文件 el-upload区分文件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_am_a_div/article/details/125545564
版权

在这里插入图片描述

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

此时就遇到一个问题：因为是遍历出来的上传组件，导致上传成功: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>
i_am_a_div_日积月累_
关注
  • 3
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
elemetUi 组件--el-upload 实现上传Excel文件的实例 elemetUi 组件的 el-upload 是一个功能强大且灵活的上传组件，通过它我们可以轻松地实现文件上传的功能。下面我们将详细介绍如何使用 elemetUi 组件的 el-...
el-upload上传时的file-List的基本用法
m0_54849873的博客
03-11 3273
关于el的file-List用法官网有写，但是一直搞不懂的时url到底是什么地址，跟上传地址有什么区别。 于是百度下，有人这么写，意思是url就是文件的地址。难道官网的url就是网上图片的地址？有人问了，那要是本地地址呢，这个url怎传？ html： <el-upload action="https://192.168.1.1:8888/xxx上传接口" :file-list="fileList" <i class="el-icon-plus"></i> </
el-upload多个文件，动态增加+预览word 、excel、ppt、pdf、png、jpg文件
m0_49471668的博客
05-24 2345
el-upload多个文件，动态增加 <template> <span> <el-row v-for="(v, i) in RecordOperation.upload" :key="i"> <el-col :span="6"> <el-form-item> <el-input v-model.trim="v.fileName" ..
vue3+ts使用ElUpload上传（包含loading与重新上传）
最新发布
leng0920的博客
05-13 229
vue3+ts使用ElUpload上传（包含loading与重新上传）
elementUI+Vue，使用ref区分不同的el-upload，清除其缓存保证能够多次上传选择文件。（多个el-upload时注意区分
weixin_43185419的博客
01-04 4320
需求：在表格中嵌套使用多个el-upload组件，可能会需要多次选择。 问题分析： 单独使用el-upload时，想要在隐藏上传列表的条件下实现多次上传，就需要在每次选中文件时清除上次选择的文件缓存。 使用this.$refs.[refname].clearFiles(); 举例： <el-upload ref="picupload" class="avatar-uploader" action="#
记录el-upload表单上传验证
ZhangbiaoAAAAA的博客
05-12 2208
要求： 在表单中实现单张图片上传，并且自动进行表单验证，提交验证和重置功能 html部分： 其他表单自行添加，我只把上传部分单独拎出来了 <el-form-item label="上传" prop="advimgsrc" required> <el-upload :action="uploadURL" ref="upload" list-type="picture-card" :sho
vue表格中循环多个el-upload点击时传参
weixin_44888392的博客
08-19 2239
在表格中循环了多个el-upload，然后点击的时候，根据当前数据的id上传文件，那么怎么获取id成了一个问题，记录一下找到解决方法 <el-upload style="display: inline-block;margin-right: 10px" action="string" accept=".pdf,.PDF" :show-file-list="false" :http-request="(s
element-ui Upload多文件一次上传，获取选择的文件的数量
weixin_42421494的博客
02-21 7296
多文件上传时，不需要手动点击和分次上传；一次性上传所有选择的文件
vue-cli3.0+element-ui上传组件el-upload的使用
10-17
el-upload组件允许用户上传文件，并且可以进行一系列的定制和限制，以满足各种需求。 首先，`<el-upload>`组件的基本用法是在模板中创建一个元素，通过属性来控制它的行为。例如： ```html <el-upload class=...
通过vue的el-upload组件上传文件的例子
05-31
vue上传文件
vue+axios+el-upload实现文件上传（带参数）：
01-03
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉； async uploadFile(...
解决 element-ui Upload 上传组件，上传多个文件时 on-success 只触发了一次
lhz_333的博客
03-17 4685
解决 upload 组件，设置多选同时上传多张图片时，on-success 回调函数只执行了一次的问题。
记录element ui Upload 上传 on-success动态传参
u010833811的博客
10-22 1224
参考诸多资料找到思路，记录防止忘记 on-success=" function (res, file) { return quillImgSuccess(res, file, value.id)}" /** 上传文件 */ quillImgSuccess(res, file,index) { // res为图片服务器返回的数据 // 如果上传成功 根据index值进行业务处理 if...
vue element upload组件 file-list的动态绑定
热门推荐
H的博客
10-10 3万+
本文解决，upload组件 file-list的动态绑定list1，list2 ...，实现动态添加,相信很多电商后台管理系统都会遇到这个需求，例子如下 本例，我是使用的upload默认的上传地址（很多图片不能上传，你可以在本地截几张图片，进行测试），我可以上传多张活动图片，可以加相应的，名称，链接描述等，如果有多个活动，可以点击添加活动，在第二个活动又能添加相应的内容，保存完之后，可以实现...
el-upload 多文件 上传 只执行一次成功回调on-success的问题
懒洋洋
07-23 1万+
el-upload批量上传只执行一次成功回调on-success的问题 问题已解决，如图，附上链接 https://nyd0u5wyud.feishu.cn/docs/doccnLoii5xShTk7yiPXTzD9Suh
el-upload手动控制上传多文件校验和文件删除
Suk__的博客
04-27 1万+
之前写过一篇关于el-upload单文件自定义上传文章:axios+elementui的upload使用http-request自定义文件上传_Suk_阿硕的博客-CSDN博客_http-request自定义文件上传<!-- 关于组件的部分属性: action:上传的地址,和axios没关系,elementui自己发请求 :show-file-list:是否显示上传的文件列表 :on-success:上传成功的回调 :on-error:上传失败的回调 :before-upload:上传之前的回调，可.
element同时上传两个文件时，只有一个上传成功或者说on-success只执行一次
weixin_47756693的博客
11-11 2634
解决element同时上传两个文件时，只有一个上传成功 解决element同时上传两个文件时，on-success只执行一次
el-upload自定义filelist列表，配合el-image-viewer显示图片
weixin_42396197的博客
09-05 4166
只要是实现思路，核心就是关闭upload自带的filelist显示框，然后图片上传成功后把返回的图片地址push到table的fileList中，script具体就不写了，有问题可以私信，欢迎一起交流学习。上述一共有三段代码，分别是上传控件，列表控件，图片预览控件，图片预览控件在script中引入。
【uView】循环使用u-upload上传组件实例
青烟小生的博客
09-27 697
的返回值是来自index的传递参数的，所以我们可以通过这个参数来确定当前的上传组件所在的数组的下标值是多少，这样就可以把上传成功返回的参数赋值到对应的数组参数里面去。1、在文档上面可以看到成功失败删除的回调方法都会有一个。因为微信小程序的上传也是需要修改头部信息的和添加。的，所以需要手动把头部信息给修改了。
el-upload上传多个文件
04-22
好的，很高兴回答你的问题。关于el-upload上传多个文件的问题，你可以这样做: 1.设置el-upload的multiple属性为true，使其允许上传多个文件。 2.添加一个file-list属性，来存储上传的文件列表，如下所示： <el-upload action="https://jsonplaceholder.typicode.com/posts/" :multiple="true" :file-list="fileList"> </el-upload> 3.在methods中添加一个handleUploadSuccess方法，用于上传成功后的回调操作。可以在该方法中将上传的文件添加到fileList中，如下所示： handleUploadSuccess(response, file, fileList) { this.fileList = fileList; } 通过以上步骤，你就能够实现el-upload上传多个文件的功能了。希望能够帮助到你！如果还有其他问题，欢迎继续向我提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值