The upload component in ant design uploads a large file to show the progress of the progress bar

  • 2021-09-11 19:29:57
  • OfStack

The Upload component comes with its own upload progress, but the style adjustment is very troublesome. What we have to do is to customize 1

First, the page should introduce components Upload and Progress


uploadAttachmentsProps = {
 action: `/api/upload`,
 showUploadList: false, //  Close your own list here 
 beforeUpload: (info) => {
 /*  Hook before uploading, which can be used to judge the type and size  
 if (' Does it match the type ') {
  return false
 }
 if (' Does it match the type ') {
  return false
 }
 return true
 */
 } , 
 onChange: (info) => {
 console.log(info)
 /*
   Callbacks have 3 Parameters 
  {
   file: { ... },
   fileList: [ ... ],
   event: { ... }
  }
 */ 
 }
} 
<Upload {...uploadAttachmentsProps}>
 <a style={{marginRight: '10px'}}><Icon type="plus"></Icon> Add </a>
</Upload> 

Progress bar We need event in callback.


const event = info.event
if (event) { // 1 Be sure to add judgment, or you will report errors 
 let percent = Math.floor((event.loaded / event.total) * 100)

 this.setState({percent: percent})
 console.log(percent) // percent Is the value of the progress bar 
}

Progress bar component:

< Progress percent={this.state.percent} / >

Additional knowledge: ant design (antd) Upload clicking to upload pictures is too slow

Every time you click to upload, you have to wait for half a year to come out and choose the file box. Sometimes, you will come out twice, which is disgusting. In fact, it is the computer that searches for files locally. Filtering time


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>

Note:

It's important to note out the above: accept: Imagine that if you give the computer a lot of filters, it will be slow. image/* represents all the picture files, and if possible, write as few as possible. The speed is naturally fast.

However, it seems that the first time will be slower, but it will not be like the previous one, and it will have to wait every time.


Related articles: