ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例

更新時(shí)間：2020年10月29日 15:13:55 作者：祁沐白神

這篇文章主要介紹了ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

Upload組件是自帶上傳進(jìn)度，但是樣式調(diào)起來(lái)很麻煩，我們要做的就是自定義一個(gè)

首先頁(yè)面要引入組件 Upload， Progress

uploadAttachmentsProps = {
 action: `/api/upload`,
 showUploadList: false, // 這里關(guān)閉自帶的列表
 beforeUpload: (info) => {
 /* 上傳前的鉤子，可以用來(lái)判斷類(lèi)型，和大小 
 if ('是否符合類(lèi)型') {
  return false
 }
 if ('是否符合類(lèi)型') {
  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/*代表了全部的圖片文件，如果可能的話，盡量少寫(xiě)兩個(gè)。速度自然就快了。

不過(guò)第一次好像還是會(huì)慢點(diǎn)的，不過(guò)不會(huì)像以前一樣，每次都要等。

以上這篇ant design中upload組件上傳大文件,顯示進(jìn)度條進(jìn)度的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

五分鐘搞懂Vuex實(shí)用知識(shí)(小結(jié))
本篇文章主要介紹了五分鐘搞懂Vuex實(shí)用知識(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
從eleUI的Loading知道了單例模式的用法
這篇文章主要介紹了從eleUI的Loading知道了單例模式的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-01-01
淺談Vue2.0父子組件間事件派發(fā)機(jī)制
本篇文章主要介紹了淺談Vue2.0父子組件間事件派發(fā)機(jī)制，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
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ò)問(wèn)題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報(bào)錯(cuò)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
解決vue v-for src 圖片路徑問(wèn)題 404
今天小編就為大家分享一篇解決vue v-for src 圖片路徑問(wèn)題 404，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
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)容
這篇文章主要介紹了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
vue實(shí)現(xiàn)信息管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)信息管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05