项目中有一个需求根据文件名判断文件是否已经上传,上传过的文件进行拦截并且给出提示信息,因此需要在before-upload方法前添加async,并且使用await调用远程方法,代码如下所示
async handleBeforeUpload(file) {
// 校验文件是否已经上传过
const response = await checkFileExistSurveying(file.name);
const uploadFileFlag = response.data;
if (uploadFileFlag) {
this.$modal.msgError("上传文件已经存在");
// 由于使用了async,使异步方法达到同步的效果,会导致原方法返回false,拦截失效,所以需要返回Promise.reject()才会
return Promise.reject();
} else {
// 上传文件
this.$modal.loading("正在上传文件");
this.number++;
return true;
}
}
如果校验不通过直接return false,该方法会导致拦截失效,文件仍能上传。所以在调用使用同步方法调用远程服务时需要返回整个Promise对象,直接return Promise.reject(),方法就可以正常进行拦截。