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

文章描述了如何在上传文件时,对选中的多个文件大小进行校验,确保不超过50MB,同时针对MinIO和阿里云OSS等存储类型进行了处理。
摘要由CSDN通过智能技术生成

场景描述:
点击上传的时候,选中多个文件,同时上传,然后添加一个校验,选中的所有的文件的大小不能超过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)
          }
        }
      }
    }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`el-upload` 是 `ElementUI` 组件库中的一个组件,用于实现文件上传功能。它支持多文件上传、拖拽上传等功能,使用起来非常方便。以下是一个简单的示例: ```html <template> <div> <el-upload action="/api/upload" :data="{token: 'xxxxx'}" :on-success="handleSuccess" :on-error="handleError" :multiple="true" :limit="3" :accept="'image/*'" ref="upload" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过3个文件</div> </el-upload> </div> </template> <script> export default { methods: { handleSuccess(response, file, fileList) { console.log(response) console.log(file) console.log(fileList) }, handleError(error, file, fileList) { console.log(error) console.log(file) console.log(fileList) } } } </script> ``` 上面的代码中,我们将 `el-upload` 组件的 `action` 属性设置为上传文件的后端接口地址,`data` 属性设置为上传时需要携带的参数,`on-success` 和 `on-error` 属性分别绑定了上传成功和上传失败的回调函数。`multiple` 属性表示是否支持多文件上传,`limit` 属性表示最多上传文件数,`accept` 属性表示接受的文件类型。我们还使用了 `ref` 属性来获取到 `el-upload` 组件的引用,方便在其他方法中操作上传组件。 在上面的示例中,我们定义了 `handleSuccess` 和 `handleError` 两个方法来处理上传成功和上传失败的情况。在上传成功时,我们可以通过 `response` 参数获取到服务器返回的数据,`file` 参数表示当前上传文件,`fileList` 参数表示当前已经上传文件列表。在上传失败时,我们可以通过 `error` 参数获取到错误信息。 需要注意的是,以上示例只是前端实现上传文件的功能,你还需要在后端编写相应的代码来处理上传请求,将上传文件保存到服务器上。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值