ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例
Upload組件是自帶上傳進(jìn)度，但是樣式調(diào)起來很麻煩，我們要做的就是自定義一個(gè)
首先頁(yè)面要引入組件 Upload， Progress
uploadAttachmentsProps = {
action: `/api/upload`,
showUploadList: false, // 這里關(guān)閉自帶的列表
beforeUpload: (info) => {
/* 上傳前的鉤子，可以用來判斷類型，和大小
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)過慢
每次點(diǎn)擊上傳的時(shí)候，要等半年，才能出來選擇文件框，有的時(shí)候，還會(huì)出來倆次，比較惡心，其實(shí)是電腦去本地搜索文件啥的，過濾的時(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è)。速度自然就快了。
不過第一次好像還是會(huì)慢點(diǎn)的，不過不會(huì)像以前一樣，每次都要等。
以上這篇ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
五分鐘搞懂Vuex實(shí)用知識(shí)(小結(jié))
本篇文章主要介紹了五分鐘搞懂Vuex實(shí)用知識(shí)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了從eleUI的Loading知道了單例模式的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
本篇文章主要介紹了淺談Vue2.0父子組件間事件派發(fā)機(jī)制，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01
使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)
這篇文章主要介紹了使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vite+ts vite.config.ts使用path報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
今天小編就為大家分享一篇解決vue v-for src 圖片路徑問題 404，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào)
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)當(dāng)渲染文本超出一定字?jǐn)?shù)時(shí)顯示省略號(hào),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue之讀取并解析ini文件中的內(nèi)容,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法
這篇文章主要介紹了Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05