1、beforeUpload钩子停止上传
官方文档
官方示例
beforeUpload(file){
this.fileList = [...this.fileList, file];
return false;
},
//实际使用时这样写无效,还是会上传,需要使用Promise返回false
//改正后
beforeUpload(file){
this.fileList = [...this.fileList, file];
return Promise.reject(false);
},
2、自定义form校验
//使用v-decorator绑定form表单属性时,upload组件绑定的url是一个对象,不能用原生的校验规则,得自定义校验规则
<a-form-item :label="`${$t('common.upload')}APK`">
<a-upload
name="files"
accept=".apk,.APK,.Apk"
:multiple="false"
:action="action"
:headers="token"
:fileList="fileList"
:before-upload="beforeUpload"
@change="handleAttachmentChange"
v-decorator="[
'url',
{
rules: [
{ validator: handleUrlValidator },
]
}
]"
>
<a-button :disabled="fileList.length>0"> <a-icon type="upload"/> upload</a-button>
</a-upload>
</a-form-item>
//javascript
handleUrlValidator(rule, value, callback) {
if (this.fileList.length==0) {
callback(new Error(this.$t('common.emptyErr', { name: 'APK' })));
}
callback();
},
//form:this.$form.createForm(this),
//更新form中的值
this.form.setFieldsValue({url: '', version: '', remark: '', id: 0});
//当form中的值发生变化时,手动调起校验
this.$nextTick(() => {
this.form.validateFields(['version'], { force: true }, () => {});
this.form.validateFields(['url'], { force: true }, () => {});
})