vue3,el-upload分块上传大小超过60M的大幅图片
时间: 2023-07-13 11:33:53 浏览: 108
vue+element实现大文件上传
el-upload组件支持分块上传大文件,可以使用chunk-upload属性来启用分块上传。以下是一个上传大小超过60M的大幅图片的el-upload组件分块上传的示例代码:
```html
<template>
<el-upload
class="upload-demo"
action="/upload"
:on-exceed="handleExceed"
:before-upload="beforeUpload"
:chunk-upload="true"
:chunk-size="5 * 1024 * 1024"
:limit-size="100000000"
:file-list="fileList"
multiple>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传不超过 100MB 的文件</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
fileList: []
}
},
methods: {
handleExceed(files, fileList) {
this.$message.warning(`文件数量超过限制,只能上传一个文件`);
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt100M = file.size / 1024 / 1024 < 100;
if (!isJPG) {
this.$message.error('上传图片只能是 JPG 格式!');
}
if (!isLt100M) {
this.$message.error('上传图片大小不能超过 100MB!');
}
return isJPG && isLt100M;
}
}
}
</script>
```
在上面的代码中,我们通过设置chunk-upload属性来启用分块上传,并设置chunk-size属性来设置每个分块的大小。这里我们设置每个分块的大小为5MB,可以根据实际情况进行调整。同时,在beforeUpload方法中对上传的文件进行了格式和大小的判断,如果不符合要求则会弹出提示框。如果需要上传的文件数量超过限制,则会触发handleExceed方法。
阅读全文