vue element 上传图片限制大小, before-upload 不生效问题
1、template:
<el-upload
action= ''
list-type="picture-card"
:auto-upload="false"
:show-file-list='true'
:file-list="certificates"
:on-preview="showimg"
:on-change="handlePictureCardPreview"
:limit="8"
accept=".jpg,.jpeg,.png,.JPG,.JPEG"
:on-exceed="handleExceed"
:on-remove="handleRemove">
<i class="el-icon-plus"/>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="showimgs" alt="">
</el-dialog>
2、绑定事件:
handlePictureCardPreview(file, fileList) {
const isLt5M = file.size < 1024 * 1024;
if (!isLt5M) {
this.$message.error('上传图片大小不能超过 1M!');
fileList.splice(-1,1); //移除选中图片
return false;
}
}
注:
因为 before-upload 是指在文件上传之前、文件已被选中,但还没上传的时候触发,而设置了 :auto-upload="false" 后,文件上传事件不被再次调用,,所以 before-upload 不生效,所以,限制图片大小的时候,需绑定在 :on-change 里面

浙公网安备 33010602011771号