vue el-upload上传组件,如何同时拿到所有的上传文件

场景描述:

点击上传的时候,选中多个文件,同时上传,然后添加一个校验,选中的所有的文件的大小不能超过50M,否则就报错提示。

解决思路:

一.通过给组件绑定一个class

复制代码
<el-upload
      v-if="storageType === 'minio' || storageType === 'ali-oss'"
      :http-request="upload"
      class="upload-file"
      :on-change="handFileChange"
      :accept="accept"
      :list-type="listType"
      action
      :multiple="multiple"
      :before-upload="beforeUpload"
      :on-exceed="handleExceed"
      :limit="limit"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-preview="handlePreview"
      :file-list="files"
      :disabled="disabled"
    >
      <div v-if="buttonStyle === 'button'">
        <el-badge :value="badgeValue" :hidden="badgeHidden || !limit" class="item">
          <el-button type="primary">{{ $t('common.button.clickUpload') }}</el-button>
        </el-badge>
        <el-button @click.stop="downloadZip" type="warning">批量下载</el-button>
      </div>
      <div v-if="buttonStyle === 'icon'">
        <el-button class="button-icon" type="text">
          <i class="el-icon-upload" :title="$t('common.button.clickUpload')" />
        </el-button>
      </div>
    </el-upload>

2.然后通过on-change拿到所有的文件数量

复制代码
handFileChange() {
      const upload_img = document.getElementsByClassName('upload-file')
      if (upload_img && upload_img.length > 0) {
        const upload = upload_img[0].getElementsByTagName('input')
        if (upload && upload.length > 0 && upload[0].files && upload[0].files.length > 0) {
          this.uploadNum = upload[0].files.length
          return false
        }
      }
    }

3.添加校验

复制代码
upload(content) {
      this.elements.push(content)
      if (this.elements.length === this.uploadNum) {
        const totalSize = this.elements.reduce((total, element) => total + element.file.size, 0)
        console.log('totalSize', totalSize)
        if (totalSize >= 52428800) {
          return this.$message.error('上传文件大小不得大于50MB!')
        }
        if (this.storageType === 'minio' || this.storageType === 'ali-oss') {
          for (let index = 0; index < this.elements.length; index++) {
            const element = this.elements[index]
            this.minioOssUpload(element)
          }
        }
      }
    }
相关推荐
Hilaku7 分钟前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode12 分钟前
iOS 苹果内购 Storekit 2
前端
LuckySusu13 分钟前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu14 分钟前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu18 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu18 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu22 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在24 分钟前
6个值得收藏的.NET ORM 框架
前端·后端·.net
LuckySusu29 分钟前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate33 分钟前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员