antdvue3里面的upload组件自定义上传方法初探

自动上传的方式这里就不说了，主要是后端给的上传接口返回了图片的id,表单提交的时候要那这个id传给后台，所以就做了自定义上传

主要方法就是用customRequest覆盖默认的方法！

<a-upload v-model:file-list="formState.fileList" list-type="picture-card" class="avatar-uploader"
                    :before-upload="beforeUpload" :customRequest="uploadHandle" accept=".png, .jpg, .jpeg, .bmp"
                    @preview="handlePreview">
                    <div v-if="formState.fileList.length < 5">
                        <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                        <div v-else>
                            <plus-outlined></plus-outlined>
                            <div class="ant-upload-text">上传图片</div>
                        </div>
                    </div>
                </a-upload>
                <a-modal :visible="previewVisible" :title="previewTitle" :footer="null" @cancel="handleCancel">
                    <img alt="example" style="width: 100%" :src="previewImage" />
</a-modal>

const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('只能上传图片!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('图片大小必须小于2MB!');
    }
    return isJpgOrPng && isLt2M;
}

const uploadHandle = async function (options) {
    const fileName = options.file.name
    const formData = new FormData()
    formData.append('file', options.file, fileName)
    let res = await uploadPic(formData)
    if (res.success) {
        data.formState.fileList.push({
            url: data.picUrl + res.result,
        })
        data.loading = false;
        options.onProgress(100)
        options.onSuccess(res, options.file)  //这里必须加上这个，不然会一直显示一个正在上传中的框框
    }
}

类似这种，不知道是什么原因，有知道的大神可以解释下，谢谢了~~~