ant design中upload組件上傳大文件,顯示進度條進度的實例
Upload組件是自帶上傳進度,但是樣式調起來很麻煩,我們要做的就是自定義一個
首先頁面要引入組件 Upload, Progress
uploadAttachmentsProps = {
action: `/api/upload`,
showUploadList: false, // 這里關閉自帶的列表
beforeUpload: (info) => {
/* 上傳前的鉤子,可以用來判斷類型,和大小
if ('是否符合類型') {
return false
}
if ('是否符合類型') {
return false
}
return true
*/
},
onChange: (info) => {
console.log(info)
/*
回調有三個參數(shù)
{
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就是進度條的數(shù)值
}
進度條組件:
<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>
注意點:
重要的是上面注釋掉的:accept:想象一下,你如果給電腦很多篩選條件的話自然就慢了,image/*代表了全部的圖片文件,如果可能的話,盡量少寫兩個。速度自然就快了。
不過第一次好像還是會慢點的,不過不會像以前一樣,每次都要等。
以上這篇ant design中upload組件上傳大文件,顯示進度條進度的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
基于Vue+elementUI實現(xiàn)動態(tài)表單的校驗功能(根據條件動態(tài)切換校驗格式)
這篇文章主要介紹了Vue+elementUI的動態(tài)表單的校驗(根據條件動態(tài)切換校驗格式),本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
Vue.set()和this.$set()使用和區(qū)別
我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣,那么Vue.set()和this.$set()的區(qū)別是什么,本文詳細的介紹一下,感興趣的可以了解一下2021-06-06

