<!-- html部分 -->
<a-upload-draggerref="upload" name="file" :multiple="true"
:customRequest="customRequest"
:progress="progress"
@drop="handleDrop"
@remove="removeFile">
<pclass="ant-upload-drag-icon">
<inbox-outlined></inbox-outlined>
</p>
<pclass="ant-upload-text">点击或拖拽文件上传</p>
<pclass="ant-upload-hint">
支持单个或批量上传。
</p>
</a-upload-dragger>
// 上传进度条（直接拿官方的样式）
constprogress: UploadProps['progress'] = {
strokeColor: {
'0%':'#108ee9',
'100%':'#87d068'
},
strokeWidth:3,
format: (percent: any) =>`${parseFloat(percent!.toFixed(2))}%`,
class:'test'
}
// 存储要上传的文件（用于后续有需要的操作）
letneedFile: FormData = newFormData();
// 上传文件 请求
constemployeeFileUpload = async (File: { file: any; onProgress?: any; onSuccess?: any }) => {
const { file, onProgress, onSuccess } = File
constformData = newFormData();
// 注意 这个file 是一个对象 我们只要里面的 file
formData.append('file', file)
formData.append('page',String(PreviewData.page)) //这是我自己的功能需求所需的参数，可不看
needFile = formData;
// 进度条相关配置：
letconfig = {
timeout:120000,
onUploadProgress: (Progress: { loaded: number; total: number }) => {
letpercents = Math.round((Progress.loaded * 100) / Progress.total)
// 更新进度条
onProgress({ percent:percents }, file)
}
}
constres: any = awaitreqUploadFilePreview(formData,config)
console.log(res, 'res --->');
if (res.code === 200) {
// 如果预上传成功：进度条成功，并将数据返回给表格（这也是个人功能需求，只需要看onSuccess即可）
onSuccess(res, file)
dataSource.value = res.data.data;
total.value = res.data.total
returnres.data;
}
returnPromise.reject(newError(res.msg));
}
// 组件绑定该自定义预上传方法
constcustomRequest = async(file: any)=>{
// 接口请求
employeeFileUpload(file).then((request: any) => {
message.success(request.msg);
}).catch((e) => {
message.error(e.msg);
});
}
下面是接口api
//上传文件的请求
exportconstreqUploadFilePreview: (data: any,config?: object) =>Promise<AxiosResponse> = (data,config) =>
request({
url:'你的url',
method:'post',data, ...config
});
