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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

场景描述:
点击上传的时候,选中多个文件,同时上传,然后添加一个校验,选中的所有的文件的大小不能超过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)
          }
        }
      }
    }
### 如何通过 `el-upload` 组件获取上传文件的地址 在 VueElement UI 的开发环境中,可以通过配置 `el-upload` 组件的相关参数来实现对上传文件的操作。以下是具体的方法以及示例代码。 #### 使用 `on-success` 回调函数获取文件地址 `el-upload` 提供了一个回调函数 `on-success`,该函数会在文件成功上传至服务器后被触发,并返回响应数据。通常情况下,服务器会将文件存储路径作为 JSON 数据的一部分返回给前端[^1]。因此可以在 `on-success` 中捕获并保存这个地址。 ```vue <template> <div> <!-- 配置 el-upload --> <el-upload :action="uploadUrl" :auto-upload="false" :before-upload="handleBeforeUpload" @change="handleChange" @success="handleSuccess"> <el-button slot="trigger" size="small" type="primary">选取文件</el-button> <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> </el-upload> </div> </template> <script> export default { data() { return { uploadUrl: 'https://example.com/upload', // 替换为实际的上传接口 URL fileAddress: '' // 存储文件地址 }; }, methods: { handleBeforeUpload(file) { console.log('文件上传前:', file); const isLt2M = file.size / 1024 / 1024 < 2; if (!isLt2M) { this.$message.error('上传文件大小不能超过 2MB!'); } return isLt2M; }, handleChange(file, fileList) { console.log('文件列表变化:', file, fileList); }, submitUpload() { this.$refs.upload.submit(); // 手动触发表单提交 }, handleSuccess(response, file, fileList) { // 假设服务器返回的数据结构如下 { code: 0, message: '', data: { url: 'file_url' } } if (response.code === 0 && response.data.url) { this.fileAddress = response.data.url; // 将文件地址存入变量 console.log('文件已成功上传,地址为:', this.fileAddress); } else { this.$message.error('文件上传失败'); } } } }; </script> ``` 上述代码实现了以下功能: - 设置了手动上传模式 (`auto-upload=false`) 并提供了自定义按钮用于控制上传行为[^2]。 - 定义了 `before-upload` 方法,在文件上传之前执行验证逻辑。 - 利用了 `@success` 事件监听器接收来自服务器的成功反馈,并从中提取文件地址[^3]。 #### 注意事项 为了确保能够正确获取文件地址,请确认后台服务端程序按照约定格式返回数据。如果返回的结果不符合预期,则需要调整解析方式或者修改 API 接口设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值