之前一直使用upload 的customRequest 想弄个进度条,但好像不能显示,产品方面也没有强制的要求显示进度条,就一直没有拖着了,但是现在产品说必须要一个进度条,没办法了,解决呗,看了gitlab 和 各种文章,好像都没有一个找到解决方法。。。
但还是被我找到解决办法了hhhhhh(对于我来说是好使的)
解决办法先上代码:
const [fileList, setFileList] = useState<UploadFile[]>([])
// 我这儿是只支持上传一个文件
const uploadFile = async (options: any) => {
const { file, onSuccess, onProgress, onError } = options
if (!file.type.includes('zip')) {
message.error('仅支持.zip格式附件!')
return
}
const formData = new FormData()
formData.append('file', file)
axios
.post('请求url', formData, {
onUploadProgress: ({ total, loaded }) => {
onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) }, file)
},
})
.then(res => {
onSuccess({ ...res, name: file.name, status: 'done' }, file)
})
.catch(onError)
return {
abort() {
console.log('上传进度中止')
},
}
}
const uploadProps: UploadProps = {
accept: '.zip',
maxCount: 1,
fileList,
onChange(info: any) {
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList)
}
if (info.file.status === 'done') {
console.log(`${info.file.name} 文件上传成功`)
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 文件上传失败`)
}
setFileList([...info.fileList])
},
customRequest: uploadFile,
}
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>上传文件</Button>
</Upload>
以上调用onProgress以及onSuccess的方式请参考
官网customRequest使用方法
参考博客文章
这里就不具体讲述了
最主要的还是Change方法,这是我找解决办法时翻文档的时候看见的一行字:
点进去这个issues,你会看见有一个回答是这样的:
然后我按照他说的加上了onChange
以及 setFileList
,解决了不显示进度条的问题。很nice
所有参考:
官网customRequest使用方法
参考博客文章
issues