ant 디자인에서 upload 구성 요소가 큰 파일을 업로드하고 진도표의 진도를 표시하는 실례

uploadAttachmentsProps = {
 action: `/api/upload`,
 showUploadList: false, //  
 beforeUpload: (info) => {
 /*  ， ，  
 if (' ') {
  return false
 }
 if (' ') {
  return false
 }
 return true
 */
 }，
 onChange: (info) => {
 console.log(info)
 /*
   
  {
   file: { ... },
   fileList: [ ... ],
   event: { ... }
  }
 */ 
 }
} 
<Upload {...uploadAttachmentsProps}>
 <a style={{marginRight: '10px'}}><Icon type="plus"></Icon> </a>
</Upload> 

const event = info.event
if (event) { //  ， 
 let percent = Math.floor((event.loaded / event.total) * 100)

 this.setState({percent: percent})
 console.log(percent) // percent 
}

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>