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 里面