文章
问答
冒泡
AntDesignVue文件上传常见错误

1、beforeUpload钩子停止上传

官方文档

image.png

官方示例
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 }, () => {});
})
ant-design-vue

关于作者

小乙哥
学海无涯,回头是岸
获得点赞
文章被阅读