antd upload vue3 取消请求,取消进行中的接口请求
在使用antd upload组件时,大文件上传等待时长太久,在上传过程中想取消上传,即取消进行中的接口请求。不解释,上代码:
import axios from 'axios';
<a-upload
v-model:file-list="fileList"
name="file"
:multiple="true"
:action= 'Action'
:headers="headers"
@change="handleChange"
:customRequest="customRequest"
accept=".pdf, .jpg, .png"
:before-upload="beforeUploadFile"
>
<a-button class="mdcBtn" size="small">
<i class="iconfont icon-shangchuan" style="margin-right: 5px;"></i>
<span>上传文件</span>
</a-button>
<span style="margin-left: 10px;">(注:支持pdf、png、jpg格式,大小不超过5M)</span>
</a-upload>
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
const customRequest = (info: FileInfo) => {
axios.post(Action.value, form, {
cancelToken: source.token
})
.then((data) => {
});
};
const deleteFile = (val) => {
if(val.id) {
} else {
source.cancel('cancel upload');
}
};
代码有冗余,哪有免费午餐,凑合吃吧!