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

2226 단어 antdesignupload파일진도표
Upload 구성 요소는 업로드 진도를 가지고 있지만, 스타일을 조정하는 것은 매우 번거롭습니다. 우리가 해야 할 일은 사용자 정의입니다.
우선 페이지에 구성 요소 Upload, Progress 도입

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 
}
진행률 막대 구성 요소:

추가 정보: ant design(antd) Upload 클릭 시 업로드 반응이 느리다
매번 업로드를 클릭할 때마다 반년을 기다려야 파일 상자를 선택할 수 있습니다. 때로는 두 번이나 나올 수도 있습니다. 비교적 메스꺼워요. 사실은 컴퓨터가 로컬로 파일을 검색하는 시간입니다.

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: 상상해 보세요. 컴퓨터에 많은 선별 조건을 주면 자연히 느려집니다. 이미지/*는 모든 그림 파일을 대표합니다. 가능하다면 두 개를 적게 쓰세요.속도가 자연히 빨라진다.
하지만 처음엔 천천히 할 것 같지만 예전처럼 매번 기다리지는 않을 거예요.
이상의 ant 디자인에서 upload 구성 요소가 큰 파일을 업로드합니다. 진도표의 진도를 보여주는 실례는 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고도 해주시고 저희를 많이 사랑해 주십시오.
TIL | #24 Node.js | mongoDB, mongoos, esm
[알고리즘] 프로그래머스 - 문자열 다루기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage