ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例
Upload組件是自帶上傳進(jìn)度，但是樣式調(diào)起來(lái)很麻煩，我們要做的就是自定義一個(gè)
首先頁(yè)面要引入組件 Upload， Progress
uploadAttachmentsProps = {
action: `/api/upload`,
showUploadList: false, // 這里關(guān)閉自帶的列表
beforeUpload: (info) => {
/* 上傳前的鉤子，可以用來(lái)判斷類型，和大小
if ('是否符合類型') {
return false
}
if ('是否符合類型') {
return false
}
return true
*/
}，
onChange: (info) => {
console.log(info)
/*
回調(diào)有三個(gè)參數(shù)
{
file: { ... },
fileList: [ ... ],
event: { ... }
}
*/
}
}
<Upload {...uploadAttachmentsProps}>
<a style={{marginRight: '10px'}}><Icon type="plus"></Icon>添加</a>
</Upload>
進(jìn)度條我們需要回調(diào)里的 event，
const event = info.event
if (event) { // 一定要加判斷，不然會(huì)報(bào)錯(cuò)
let percent = Math.floor((event.loaded / event.total) * 100)
this.setState({percent: percent})
console.log(percent) // percent就是進(jìn)度條的數(shù)值
}
進(jìn)度條組件：
<Progress percent={this.state.percent} />
補(bǔ)充知識(shí)：ant design (antd) Upload 點(diǎn)擊上傳圖片反應(yīng)過(guò)慢
每次點(diǎn)擊上傳的時(shí)候，要等半年，才能出來(lái)選擇文件框，有的時(shí)候，還會(huì)出來(lái)倆次，比較惡心，其實(shí)是電腦去本地搜索文件啥的，過(guò)濾的時(shí)間
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>
注意點(diǎn)：
重要的是上面注釋掉的：accept：想象一下，你如果給電腦很多篩選條件的話自然就慢了，image/*代表了全部的圖片文件，如果可能的話，盡量少寫兩個(gè)。速度自然就快了。
不過(guò)第一次好像還是會(huì)慢點(diǎn)的，不過(guò)不會(huì)像以前一樣，每次都要等。
以上這篇ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue-touch報(bào)priority錯(cuò)誤的解決
這篇文章主要介紹了使用vue-touch報(bào)priority錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
使用imba.io框架得到比 vue 快50倍的性能基準(zhǔn)
imba 是一種新的編程語(yǔ)言，可以編譯為高性能的 JavaScript?？梢灾苯佑糜?Web 編程(服務(wù)端與客戶端)開發(fā)。這篇文章主要介紹了使用imba.io框架,得到比 vue 快50倍的性能基準(zhǔn),需要的朋友可以參考下2019-06-06
基于Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)表單的校驗(yàn)功能(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式)
這篇文章主要介紹了Vue+elementUI的動(dòng)態(tài)表單的校驗(yàn)(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Vue封裝功能組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue slot用法(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
使用vue-cli4.0快速搭建一個(gè)項(xiàng)目的方法步驟
這篇文章主要介紹了使用vue-cli4.0快速搭建一個(gè)項(xiàng)目的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要為大家介紹了Vue中的computed屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
Vue.set()和this.$set()使用和區(qū)別
我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個(gè)api的實(shí)現(xiàn)原理基本一模一樣，那么Vue.set()和this.$set()的區(qū)別是什么，本文詳細(xì)的介紹一下，感興趣的可以了解一下2021-06-06
vue實(shí)現(xiàn)的樹形結(jié)構(gòu)加多選框示例
這篇文章主要介紹了vue實(shí)現(xiàn)的樹形結(jié)構(gòu)加多選框,結(jié)合實(shí)例形式分析了在之前遞歸組件實(shí)現(xiàn)vue樹形結(jié)構(gòu)的基礎(chǔ)之上再加上多選框功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
這篇文章主要介紹了關(guān)于vue的路由模式及修改方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03