场景描述:
点击上传的时候,选中多个文件,同时上传,然后添加一个校验,选中的所有的文件的大小不能超过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) } } } }
复制