antd +vue3 a-upload 组件 实现文件的上传

1. 效果图如下

2. 图片上传 前端采用formaData形式上传 参数类型为file

var formaData=new FormData()
formaData.append('picture(参数名称)',file(选择的文件))
将formaData传递给后端 获取图片链接地址

3. 代码：

   三个必要参数 - headers 添加token - action 上传地址 - file-list 展示文件信息 - type 展示形式

<a-upload 
    v-model:file-list="fileList" action="https://www.mocky.io/v2/5cc8019d300000980a055e76" 
    list-type="picture-card" @
    preview="handlePreview" > 
    <div v-if="fileList.length < 8"> 
        <plus-outlined />
        <div style="margin-top: 8px">Upload</div>
    </div> 
</a-upload> 
<a-modal 
    :visible="previewVisible" 
    :title="previewTitle" 
    :footer="null"
    @cancel="handleCancel"> 
    <img alt="example" style="width: 100%" :src="previewImage" /> 
</a-modal>

4.实现过程中遇到的问题：

• 拦截上传文件，并校验文件

const beforeUpload = file => { 
    return new Promise(resolve => { 
        const reader = new FileReader(); 
        reader.readAsDataURL(file); 
        reader.onload = () => { 
            const img = document.createElement('img'); 
            img.src = reader.result; 
            img.onload = () => { 
                const canvas = document.createElement('canvas'); 
                canvas.width = img.naturalWidth; 
                canvas.height = img.naturalHeight; 
                //添加验证文件代码
                }; 
           }; 
    }); 
};

• 文件校验成功，但是并未删除文件，a-upload仍会显示图片

  解决办法：定义一个变量isCheck 然后在文件校验完成，改变变量isCheck的值，然后在以下代码位置添加判断条件

const handleChange = info => { 
//在这判断isCheck 并将fileList设置为空值
if (info.file.status === 'uploading') { 
    loading.value = true; return; 
} 
if (info.file.status === 'done') {
    // Get this url from response in real world. 
    getBase64(info.file.originFileObj, base64Url => { 
        imageUrl.value = base64Url; 
        loading.value = false; 
    }); 
} 
if (info.file.status === 'error') { 
    loading.value = false; 
    message.error('upload error');
    } 
};

• 修改已上传的文件，并回显a-upload框内文件，设置fileList如下格式就可以，图片展示

{
    uid: 'uid', 
    status:'done', 
    type:'image/png',
    url:'图片网络地址
}

5. 如实现有问题，请联系我。