首页 前端知识 vue el-upload上传组件,如何同时拿到所有的上传文件

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

2024-04-01 10:04:30 前端知识 前端哥 533 458 我要收藏

场景描述:
点击上传的时候,选中多个文件,同时上传,然后添加一个校验,选中的所有的文件的大小不能超过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)
}
}
}
}
复制
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4372.html
标签
评论
还可以输入200
共0条数据,当前/页
发布的文章

前端vue实现甘特图

2024-04-19 21:04:35

HTML入门(详细)

2024-04-19 21:04:24

HTML 入门手册(一)

2024-04-19 21:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!