1、使用elementPlus组件库中upload组件上传文件限制文件大小,需要在该组件的on-change这个API中做处理
<el-upload
v-model:file-list="item.fileList"
@click="whichOne(index)"
accept=".jpg,.jpeg,.png,.gif,.webp"
list-type="picture-card"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:on-change="handleSuccess"
:on-exceed="warning"
:limit="imgLength"
:auto-upload="false"
>
<el-icon>
<Plus />
</el-icon>
</el-upload>
2、on-change这个Api中
打印形参file看看里面有size这个属性表示文件大小这个数值对应(n*1024*1024 n表示m)
const handleSuccess = (file: UploadFile) => {
console.log('选中文件',file)
//限制文件大小
const maxSize = 30 * 1024 * 1024;//限制30M
if (file?.size > maxSize) {
ElMessage.warning('文件大小不得超过30M');
//清除选中图片
fileList.value = [];
return;
}
//其他逻辑
}