在使用Upload 上传(通过点击或者拖拽上传文件),其实还是有些小坑的,
如果我们在before-upload中直接返回true或者是false,那么它其实也是会上传文件的,因为它也会触发on-change函数。
我这里是采用在对应的函数中返回一个promise
来解决的,就像下面这样:
/**
* 图片文件验证
* @param file
*/
public imgBeforeUpload(file: any) {
return new Promise((resolve, reject) => {
const isJPEG = file.type === 'image/jpeg';
const isPNG = file.type === 'image/png';
const isPG = (isJPEG || isPNG) //限制图片格式为jpg / png
const isLt5M = file.size / 1024 / 1024 < 5; //限制图片大小
if (!isPG) {
this.$message.error('上传图片只能是 JPG 或 PNG 格式!');
return reject(false)
} else if (!isLt5M) {
this.$message.error('上传图片大小不能超过 5MB!');
return reject(false)
} else {
return resolve(true);
}
});
}
/**
* 视频文件验证
* @param file
*/
public videoBeforeUpload(file: any) {
return new Promise((resolve, reject) => {
const isMp4 = file.type === 'video/mp4';
const isLt5M = file.size / 1024 / 1024 < 5; //限制 视频 大小
if (!isMp4) {
this.$message.error('上传视频只能是 mp4 格式!');
return reject(false)
} else if (!isLt5M) {
this.$message.error('上传视频大小不能超过 5MB!');
return reject(false)
} else {
return resolve(true);
}
});
}
这样在不满足条件的情况下,就不会调用on-success了