快捷導(dǎo)航

ant design中upload組件上傳大文件,顯示進度條進度的實例

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

這篇文章主要介紹了ant design中upload組件上傳大文件,顯示進度條進度的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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

首先頁面要引入組件 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)有三個參數(shù)
  {
   file: { ... },
   fileList: [ ... ],
   event: { ... }
  }
 */ 
 }
} 
<Upload {...uploadAttachmentsProps}>
 <a style={{marginRight: '10px'}}><Icon type="plus"></Icon>添加</a>
</Upload>

進度條我們需要回調(diào)里的 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 點擊上傳圖片反應(yīng)過慢

每次點擊上傳的時候，要等半年，才能出來選擇文件框，有的時候，還會出來倆次，比較惡心，其實是電腦去本地搜索文件啥的，過濾的時間

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組件上傳大文件,顯示進度條進度的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: