溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
ant design使用upload組件實現上傳大文件時顯示進度條進度？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
首先頁面要引入組件 Upload， Progress
uploadAttachmentsProps = {
action: `/api/upload`,
showUploadList: false, // 這里關閉自帶的列表
beforeUpload: (info) => {
/* 上傳前的鉤子，可以用來判斷類型，和大小
if ('是否符合類型') {
return false
}
if ('是否符合類型') {
return false
}
return true
*/
}，
onChange: (info) => {
console.log(info)
/*
回調有三個參數
{
file: { ... },
fileList: [ ... ],
event: { ... }
}
*/
}
}
<Upload {...uploadAttachmentsProps}>
<a style={{marginRight: '10px'}}><Icon type="plus"></Icon>添加</a>
</Upload> 進度條我們需要回調里的 event，
const event = info.event
if (event) { // 一定要加判斷，不然會報錯
let percent = Math.floor((event.loaded / event.total) * 100)
this.setState({percent: percent})
console.log(percent) // percent就是進度條的數值
}進度條組件：
<Progress percent={this.state.percent} />
補充知識：ant design (antd) Upload 點擊上傳圖片反應過慢
每次點擊上傳的時候，要等半年，才能出來選擇文件框，有的時候，還會出來倆次，比較惡心，其實是電腦去本地搜索文件啥的，過濾的時間
const props = {
action: this.state.action,
fileList: fileList,
data: {
appid: appid,
secret: secret,
},
headers: {'X-Requested-With': null},
// accept: "image/*",
accept: "image/jpg,image/jpeg,image/png,image/bmp",
onChange: this.handleChange,
beforeUpload: this.beforeUpload,
onPreview: this.handlePreview,
listType: "picture-card",
};
<Upload {...props}>
{fileList.length >= this.state.length ? null : uploadButton}
</Upload>關于ant design使用upload組件實現上傳大文件時顯示進度條進度問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
