Ant-design: рдЕрдкрд▓реЛрдб file.status рд╣рдореЗрд╢рд╛ рдЕрдкрд▓реЛрдб рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 18 рдЬреБрд▓ре░ 2016  ┬╖  90рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: ant-design/ant-design

рд╕реНрдерд╛рдиреАрдп рдкрд░реНрдпрд╛рд╡рд░рдг

  • atd рд╕рдВрд╕реНрдХрд░рдг: 1.6.5
  • рдСрдкрд░реЗрдЯрд┐рдВрдЧ рд╕рд┐рд╕реНрдЯрдо рдФрд░ рдЗрд╕рдХрд╛ рд╕рдВрд╕реНрдХрд░рдг: рдореИрдХ 10.11.5
  • рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдФрд░ рдЗрд╕рдХрд╛ рд╕рдВрд╕реНрдХрд░рдг: 50.0.2661.102

рддреБрдордиреЗ рдХреНрдпрд╛ рдХрд┐рдпрд╛ рд╣реИ?

рд╕рдВрд╕реНрдХрд░рдг рез.рем.рел рдореЗрдВ рдЕрдкрд▓реЛрдб рдХрдВрдЯреНрд░реЛрд▓ рдХрд╛ рдСрдирдХрдЪреЗрдВрдЬ рд╡рд┐рдзрд┐ рдХреЗрд╡рд▓ рдПрдХ рдмрд╛рд░ рдирд┐рд╖реНрдкрд╛рджрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛, рдФрд░ info.file.status рд╣рдореЗрд╢рд╛ рдЕрдкрд▓реЛрдб рд╣реЛ рд░рд╣рд╛ рд╣реИ, http рдЕрдиреБрд░реЛрдз рд╕рд╛рдорд╛рдиреНрдп рд╣реИ, рдФрд░ реирежреж рд╡рд╛рдкрд╕ рдЖ рдЧрдпрд╛ рд╣реИред
1.6.4 рдкрд░ рдбрд╛рдЙрдирдЧреНрд░реЗрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж рд╕рд╛рдорд╛рдиреНрдп рдЙрдкрдпреЛрдЧ, рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж info.file.status рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ

рдкрд░рд┐рдгрд╛рдо рдЖрдк рдХреА рдЙрдореНрдореАрдж рд╣реИ:

рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдкрд░рд┐рдгрд╛рдо:

Reproducible рдСрдирд▓рд╛рдЗрди рдбреЗрдореЛ

рдирд╣реАрдВ

Question Usage тЭУFAQ

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдирд┐рдпрдВрддреНрд░рд┐рдд рдореЛрдб рдХреЗ рд▓рд┐рдП, рдЖрдкрдХреЛ рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣рдореЗрд╢рд╛ fileList onChange рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рддрд╛рдХрд┐ рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рд╣реЛ рд╕рдХреЗ рдХрд┐ рд╕рднреА рд░рд╛рдЬреНрдп рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд┐рдВрдХреНрд░рдирд╛рдЗрдЬрд╝ рдХрд┐рдП рдЧрдП рд╣реИрдВред рдпрд╣рд╛рдБ рд╢рдмреНрджрд╛рдВрдХрди рдХреЗ рд╕рдорд╛рди: http://ant.design/compenders/upload/#compenders -upload- рдбреЗрдореЛ-рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ

// good

onFileChange(fileList) {
  if ( ... ) {
    ...
  } else {
    ...
  }
  // always setState
  this.setState({ fileList: [...fileList] });
}

...

<Upload fileList={this.state.fileList} onChange={this.onFileChange} />
// bad

onFileChange(fileList) {
  if ( ... ) {
    this.setState({ fileList: [...fileList] });
  } else {
    ...
  }
}

...

<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

рдирд┐рдпрдВрддреНрд░рд┐рдд рдШрдЯрдХреЛрдВ рдХреА рдЕрд╡рдзрд╛рд░рдгрд╛ рдХрд╛ рдЕрдзреНрдпрдпрди рдХрд░рдиреЗ рдХреА рд╕рд┐рдлрд╛рд░рд┐рд╢ рдХреА рдЬрд╛рддреА рд╣реИ: https://facebook.github.io/react/docs/forms.html#controlled -compenders


рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рдЖрдкрдХреЛ рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП fileList рдХреНрд▓реЛрди рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рдХрд┐ рдЕрдкрд▓реЛрдб рд╕рд░рдгреА рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрди рдХреЛ рд╕рдордЭ рд╕рдХрддрд╛ рд╣реИред

- this.setState({ fileList });
+ this.setState({ fileList: [...fileList] });

рд╕рднреА 90 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдореЗрд░реЗ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдорд╛рдк рдореЗрдВ рдХреЛрдИ рд╕рдорд╕реНрдпрд╛ рдирд╣реАрдВ рд╣реИред рдХреНрдпрд╛ рдЖрд╕рд╛рди рдкреНрд░рдЬрдирди рдХреЗ рд▓рд┐рдП рд╕рдорд╕реНрдпрд╛ рдХрд╛ рдкреВрд░рд╛ рдХреЛрдб рджреЗрдирд╛ рд╕реБрд╡рд┐рдзрд╛рдЬрдирдХ рд╣реИ?

рдкреБрди: рдкрддрд╛:
http://codepen.io/xiongying/pen/jAGRvx?editors=0011

рдирд┐рдпрдВрддреНрд░рд┐рдд рдореЛрдб рдХреЗ рд▓рд┐рдП, рдЖрдкрдХреЛ рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣рдореЗрд╢рд╛ fileList onChange рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рддрд╛рдХрд┐ рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рд╣реЛ рд╕рдХреЗ рдХрд┐ рд╕рднреА рд░рд╛рдЬреНрдп рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд┐рдВрдХреНрд░рдирд╛рдЗрдЬрд╝ рдХрд┐рдП рдЧрдП рд╣реИрдВред рдпрд╣рд╛рдБ рд╢рдмреНрджрд╛рдВрдХрди рдХреЗ рд╕рдорд╛рди: http://ant.design/compenders/upload/#compenders -upload- рдбреЗрдореЛ-рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ

// good

onFileChange(fileList) {
  if ( ... ) {
    ...
  } else {
    ...
  }
  // always setState
  this.setState({ fileList: [...fileList] });
}

...

<Upload fileList={this.state.fileList} onChange={this.onFileChange} />
// bad

onFileChange(fileList) {
  if ( ... ) {
    this.setState({ fileList: [...fileList] });
  } else {
    ...
  }
}

...

<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

рдирд┐рдпрдВрддреНрд░рд┐рдд рдШрдЯрдХреЛрдВ рдХреА рдЕрд╡рдзрд╛рд░рдгрд╛ рдХрд╛ рдЕрдзреНрдпрдпрди рдХрд░рдиреЗ рдХреА рд╕рд┐рдлрд╛рд░рд┐рд╢ рдХреА рдЬрд╛рддреА рд╣реИ: https://facebook.github.io/react/docs/forms.html#controlled -compenders


рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рдЖрдкрдХреЛ рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП fileList рдХреНрд▓реЛрди рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ рдХрд┐ рдЕрдкрд▓реЛрдб рд╕рд░рдгреА рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрди рдХреЛ рд╕рдордЭ рд╕рдХрддрд╛ рд╣реИред

- this.setState({ fileList });
+ this.setState({ fileList: [...fileList] });

e0a986ed71cd87e506fb8e4ee5e2e0130fc70ae1

рдореИрдВ рдЕрдкрд▓реЛрдб рдирд┐рдпрдВрддреНрд░рдг рдХрд╛ рдЙрдкрдпреЛрдЧ рд╣рдореЗрд╢рд╛ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдореЗрдВ рд╡рд┐рдлрд▓ рд╣реЛрдиреЗ рдФрд░ рд╣рдореЗрд╢рд╛ рддреНрд░реБрдЯрд┐ рдХреА рд░рд┐рдкреЛрд░реНрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреНрдпреЛрдВ рдХрд░рддрд╛ рд╣реВрдВ: POST http: // localhost : 8081 / api / nes / 2 / uploadMusic / r_ty 404 (рдирд╣реАрдВ рдорд┐рд▓рд╛)

рдкреНрд░рддрд┐рдмрдВрдзрд┐рдд URL рдореЗрдВ рдкрд╣рдЪрд╛рди рдлрд╝реАрд▓реНрдб рдФрд░ рдЯреЛрдХрди рдХреИрд╕реЗ рдЬреЛрдбрд╝реЗрдВ? рдЙрдиреНрд╣реЗрдВ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреНрд░рд┐рдпрд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд░реЗрдВ? рдХрд╛рд░реНрд░рд╡рд╛рдИ рдХреЗрд╡рд▓ рдкрддреЗ рджреЗрддреА рд╣реИ, рдХреНрдпрд╛ рдЖрдк рдбреЗрдЯрд╛ рдирд╣реАрдВ рдЬреЛрдбрд╝ рд╕рдХрддреЗ?

рдЕрднреА рднреА React.PureComponent рдореЗрдВ рдПрдХ рд╕рдорд╕реНрдпрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ React.PureComponent рдиреЗ рдСрдкреНрдЯрд┐рдорд╛рдЗрдЬрд╝реЗрд╢рди рдЬрдЬрдореЗрдВрдЯ рдХреА рдПрдХ рдкрд░рдд рдмрдирд╛ рджреА рд╣реИред рдлрд┐рд▓рд╛рдЗрд▓рд┐рд╕реНрдЯ рдиреЗ рд╕рдВрджрд░реНрднреЛрдВ рдХреЛ рдХреИрд╢ рдХрд░ рджрд┐рдпрд╛ рд╣реИред рдпрджрд┐ рдпрд╣ рдПрдХ рд╣реА рдСрдмреНрдЬреЗрдХреНрдЯ рд╣реИ, рддреЛ рдЗрд╕реЗ рдЕрдкрдбреЗрдЯ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред React.PureComponent рдореЗрдВ рдПрдХ рдирдИ рдСрдмреНрдЬреЗрдХреНрдЯ рддреБрд░рдВрдд рдЙрддреНрдкрдиреНрди рд╣реЛрдиреА рдЪрд╛рд╣рд┐рдПред
handleChange = ({fileList}) => {
// рдлрд┐рдХреНрд╕реНрдб рдмрдЧ
this.setState ({fileList: fileList.slice ()});
}

@ afc163

@yongningfu рдЯрд┐рдк рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, рдЗрд╕реЗ рдЕрдкрдбреЗрдЯ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред

рд╡рд┐рд╢реЗрд╖ рдЕрдиреБрд╕реНрдорд╛рд░рдХ: рдирд┐рдпрдВрддреНрд░рд┐рдд рдореЛрдб рдореЗрдВ рдЙрдерд▓реЗ рддреБрд▓рдирд╛ рдХреЗ рд▓рд┐рдП React shouldComponentUpdate рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп, рднрд▓реЗ рд╣реА рд░рд╛рдЬреНрдп рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рд┐рдВрдХреНрд░рдирд╛рдЗрдЬрд╝ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реЛ, рдЗрд╕реЗ рдЕрдкрдбреЗрдЯ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред рдХрд╛рд░рдг рдпрд╣ рд╣реИ рдХрд┐ рд╕рдВрджрд░реНрдн рдмрдзрд╛рдИ === рд╣реИ, рдЬреЛ рд░реЗрдВрдбрд░ рдХреЛ рд░реЛрдХрддрд╛ рд╣реИ

рдПрдХрд╛рдзрд┐рдХ рдЪрд┐рддреНрд░реЛрдВ рдХреЛ рдЕрдкрд▓реЛрдб рдХрд░реЗрдВ, рдЗрд╕рд╕реЗ рдкрд╣рд▓реЗ рдХрд┐ рдЕрдкрд▓реЛрдб рддрд╕реНрд╡реАрд░ рдкреИрд░рд╛рдореАрдЯрд░ рд╕реАрдорд╛ рдХреЛ рд╕реЗрдЯ рдХрд░реЗ, onChange рдХреЛ рдЙрди рдЪрд┐рддреНрд░реЛрдВ рдХреА рдПрдХ рд╕реВрдЪреА рдорд┐рд▓рддреА рд╣реИ рдЬреЛ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЕрдкрд▓реЛрдб рдХреА рдЧрдИ рд╣реИрдВ, рдХреБрдЫ рдЪрд┐рддреНрд░реЛрдВ рдХреЛ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдПрдХ рдЧрд▓рдд рддрд╕реНрд╡реАрд░ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рд╕реЗ рдЙрди рд╕рднреА рдЪрд┐рддреНрд░реЛрдВ рдХреЛ рд╕рд╛рдл рд╣реЛ рдЬрд╛рдПрдЧрд╛ рдЬреЛ рдкрд╣рд▓реЗ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЕрдкрд▓реЛрдб рдХреА рдЧрдИ рдереАрдВ, рдХреНрдпрд╛ рдХреЛрдИ рд╕рдорд╛рдзрд╛рди рд╣реИ? ?

рдЬрдм рдЖрдк рд╡рд╛рдкрд╕ рдХреЙрд▓ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЖрдкрдХреЛ рдЗрд╕ рд╕реНрдерд┐рддрд┐ рдХреЛ рд░реАрд╕реЗрдЯ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП, рдЬреИрд╕реЗ рдХрд┐ рдпрд╣ .setState ({fileList});

рд╣реИрдВрдбрд▓ рдЪреЗрдВрдЬ = (рдЬрд╛рдирдХрд╛рд░реА) => {
console.log (рдЬрд╛рдирдХрд╛рд░реА);

    //цККfileListцЛ┐хЗ║цЭе
    let {fileList} = info;

    const status = info.file.status;
    if (status !== 'uploading') {
        console.log(info.file, info.fileList);
    }
    if (status === 'done') {
        message.success(`${info.file.name} file uploaded successfully.`);
    } else if (status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
    }

    //щЗНцЦ░шо╛ч╜оstate
    this.setState( {fileList});
}

рддреЛ рдЬрдм рддрдХ рд░рд╛рдЬреНрдп рдореЗрдВ onChange рдкрд░рд┐рд╡рд░реНрддрди рд╣реЛрддреЗ рд╣реИрдВ, рдЕрдкрд▓реЛрдб рдХреЛ рд╣рдореЗрд╢рд╛ рдЖрдВрддрд░рд┐рдХ рд░реВрдк рд╕реЗ рдХрд╣рд╛ рдЬрд╛рдПрдЧрд╛, рд╣реИ рдирд╛?

рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЛ рд▓рдВрдмреЗ рд╕рдордп рддрдХ рд░рдЦрд╛ рдЧрдпрд╛ рд╣реИ, рдФрд░ рдпрд╣ рд╕реЗрдЯрд╕реНрдЯреЗрдЯ рд╣реЛ рдЧрдпрд╛ рд╣реИред рдШрдЯрдХреЛрдВ рдХреЛ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдбрд┐рдЬрд╝рд╛рдЗрди рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП, рдЖрд▓рд╕реА рдмрд╛рд╣рд░реА рд░рд╛рдЬреНрдп рдкрд░ рднрд░реЛрд╕рд╛ рдХреНрдпреЛрдВ рдХрд░реЗрдВ?

рдореБрдЭреЗ рдмрд╕ рдЖрдзрд╛рд░ 64 рдХреЛрдб рдЪрд╛рд╣рд┐рдП рдФрд░ рдкреГрд╖реНрдарднреВрдорд┐ рдХреЗ рд╕рд╛рде рдмрд╛рддрдЪреАрдд рди рдХрд░реЗрдВред рдкреГрд╖реНрдарднреВрдорд┐ рдореЗрдВ рдЕрдиреБрд░реЛрдз рднреЗрдЬрдиреЗ рдХреА рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рдХреИрд╕реЗ рд╣рд▓ рдХрд░реЗрдВ?

рдХреНрдпрд╛ рдЗрд╕ рдШрдЯрдХ рдХреЛ рдмрдирд╛рдП рд░рдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдпрд╣ рд░реЗрдд рдХреА рдореВрд░реНрддрд┐ рд╣реИ?

рдпрджрд┐ рдЕрдкрд▓реЛрдб рд╡рд┐рдлрд▓ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ рдФрд░ рдореИрдВ рдкрд┐рдЫрд▓реА рдбрд┐рдлрд╝реЙрд▓реНрдЯ рддрд╕реНрд╡реАрд░ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ, рддреЛ рдореБрдЭреЗ рдХреНрдпрд╛ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП?

рдЕрдкрд▓реЛрдб рд╡рд┐рдлрд▓ рд░рд╣рд╛ред рддреНрд░реБрдЯрд┐ рдкреНрд░рд╕рдВрд╕реНрдХрд░рдг рдлрд╝рдВрдХреНрд╢рди рдореЗрдВ, рдХреЙрд▓ рдХрд░реЗрдВ
this.setState ({
fileList: intial_list
})
рдкрд┐рдЫрд▓реА рдбрд┐рдлрд╝реЙрд▓реНрдЯ рддрд╕реНрд╡реАрд░ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдШрдЯрдХ рдХрд╛ рдЕрдкрд▓реЛрдб рдкреВрд░рд╛ рд╣реЛрдиреЗ рдкрд░ рдХреЙрд▓рдмреИрдХ рдирд┐рд╖реНрдкрд╛рджрди рдХреЗ рд╕рдордп рдХреЗ рд╕рд╛рде рд╕рдорд╕реНрдпрд╛ рд╣реЛ рд╕рдХрддреА рд╣реИред рдЗрд╕ рд╕реНрдерд┐рддрд┐ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░рдиреЗ рдХрд╛ рдкреНрд░рдпрд╛рд╕ рдХрд░реЗрдВред

рдШрдЯрдХ рд╕рдВрдмрдВрдз рдЫрджреНрдо рдХреЛрдб:

<Controller>
  <Upload fileList={controller.state.fileList} onUpload={controller.onUpload} />
</Controller>

рдореВрд▓ рдШрдЯрдХ Controller рдХреЛ onUpload рдорд╛рдзреНрдпрдо рд╕реЗ рд░рд╛рдЬреНрдп рдХреЛ рдЕрдкрдбреЗрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЕрдзрд┐рд╕реВрдЪрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

рд▓реЗрдХрд┐рди рдХреНрдпреЛрдВрдХрд┐ рд░рд┐рдПрдХреНрдЯ рдХрд╛ рд░рд╛рдЬреНрдп рдЕрджреНрдпрддрди рдЕрддреБрд▓реНрдпрдХрд╛рд▓рд┐рдХ рд╣реИ, рдЕрдЧрд░ рдЫрд╡рд┐ рдЕрдкрд▓реЛрдб рдкрд░реНрдпрд╛рдкреНрдд рд░реВрдк рд╕реЗ рддреЗрдЬрд╝ рд╣реИ, рддреЛ рдирд┐рд╖реНрдкрд╛рджрди рдЖрджреЗрд╢ рдХреЗ рд░реВрдк рдореЗрдВ рджрд┐рдЦрд╛рдИ рджреЗрдЧрд╛
constroller.onUpload(ф╝Ъш░ГчФи controller.setState) -> upload.onSuccess -> upload.componentWillReceiveProps
upload.onSuccess рдирд┐рд╖реНрдкрд╛рджрди рдХреЗ рдорд╛рдорд▓реЗ рдореЗрдВ, рдЕрдкрд▓реЛрдб рдХреА рдЧрдИ рд╕реНрдерд┐рддрд┐ рдореЗрдВ рдХреЛрдИ рд╕рдВрдЧрдд рдЕрдкрд▓реЛрдб рдлрд╝рд╛рдЗрд▓ рдирд╣реАрдВ рд╣реИред рдХреНрдпреЛрдВрдХрд┐ рдЕрдкрд▓реЛрдб рдХреА рдЕрджреНрдпрддрди state.fileList рдкрд░ рдирд┐рд░реНрднрд░ рдХрд░рддрд╛ рд╣реИ componentWillReceiveProps ред

рдЗрд╕рд▓рд┐рдП, рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЗрд╕ рдШрдЯрдХ рдХрд╛ рд╡рд░реНрддрдорд╛рди рдирд┐рдпрдВрддреНрд░рд┐рдд рдореЛрдб рдЕрд╡рд┐рд╢реНрд╡рд╕рдиреАрдп рд╣реИред

рд╕рдВрднрд╡ рд╕рдорд╛рдзрд╛рди:

  1. рдирд┐рдпрдВрддреНрд░рд┐рдд рдореЛрдб рдореЗрдВ, onSuccess рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдкреНрд░рд╕рдВрд╕реНрдХрд░рдг рддрд░реНрдХ рдФрд░ рдЕрдиреНрдп рдШрдЯрдирд╛рдУрдВ рдиреЗ componentDidUpdate рдЖрдпреЛрдЬрди рдХрд┐рдпрд╛
  2. state.fileList рдмрдЪреЗрдВ props.fileList рдкрд░ рдирд┐рд░реНрднрд░ рд╣реИ, рдПрдХ рдШрдЯрдХ рдЙрджрд╛рд╣рд░рдг рдЙрджрд╛рд╣рд░рдг рдкрд░ рдлрд╝рд╛рдЗрд▓рд▓реЗрд╕реНрдЯ (рдФрд░ рдХреА рдЕрдкреЗрдХреНрд╖рд╛рдХреГрдд рд╕реНрд╡рддрдВрддреНрд░ рдмрдирд╛рдП рд░рдЦрддрд╛ рд╣реИ , рдШрдЯрдирд╛ рдЕрдкрд▓реЛрдб рдХреЛ рд╕рдВрднрд╛рд▓рдиреЗ рдореЗрдВ рдЖрд╕рд╛рдиреА

{рдлрд╝рд╛рдЗрд▓, рдлрд╝рд╛рдЗрд▓ рд╕реВрдЪреА} = рдЬрд╛рдирдХрд╛рд░реА рджреЗрдВ;
рдЕрдЧрд░ (file.size / 1024/1024> 10) {
рд╡рд╛рдкрд╕реА
}
console.log (file.status)
рдЕрдЧрд░ (file.status! = "рдХрд┐рдпрд╛ рдЧрдпрд╛") {
fileList = []
}
this.setState ({
fileList,
}, Console.log (
this.state.fileList,
this.props.form.getFieldValue ( 'рдЕрдкрд▓реЛрдб')
))
х╜У цИС ц╖╗хКа

{рдлрд╝рд╛рдЗрд▓, рдлрд╝рд╛рдЗрд▓ рд╕реВрдЪреА} = рдЬрд╛рдирдХрд╛рд░реА рджреЗрдВ;
рдЕрдЧрд░ (file.size / 1024/1024> 10) {
рд╡рд╛рдкрд╕реА
}
console.log (file.status)
рдЕрдЧрд░ (file.status! = "рдХрд┐рдпрд╛ рдЧрдпрд╛") {
fileList = []
}
this.setState ({
fileList,
}, Console.log (
this.state.fileList,
this.props.form.getFieldValue ( 'рдЕрдкрд▓реЛрдб')
))
рдЬрдм рдореИрдВ рдЬреЛрдбрд╝рддрд╛ рд╣реВрдВ
рдЕрдЧрд░ (file.status! = "рдХрд┐рдпрд╛ рдЧрдпрд╛") {
fileList = []
}
рдореЙрдирд┐рдЯрд░ onchange рдПрдХ рдмрд╛рд░, рдмрд╕ рдЗрд╕реЗ рд╣рдЯрд╛ рджреЗрдВред рдРрд╕рд╛ рдХреНрдпреЛрдВ рд╣реИ?

рдпрд╣ рд╕рдорд╕реНрдпрд╛ рд╣рд▓ рдирд╣реАрдВ рд╣реИ, рдареАрдХ рд╣реИ

рдШрдЯрдХ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП setWate рдХреЛ рдХреЙрд▓ рдХрд░реЗрдВред рдЪрд┐рддреНрд░ рдХреЛ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЬреАрд╡рди рдЪрдХреНрд░ рдореЗрдВ рдкрд░рд┐рд╡рд░реНрддрди рдирд╣реАрдВ рдХрд░реЗрдЧрд╛

componentWillReceiveProps = (nextProps) => {
    this.setState(() => ({ 
      fileList: [...nextProps.fileList] 
    }));
  }  
// ...
<Upload FileList={this.state.fileList} ...>
//...

рдЬрдм @ afc163 рдЕрдкрд▓реЛрдб рдШрдЯрдХ рдХрдИ рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдЕрдкрд▓реЛрдб рдХрд░рддрд╛ рд╣реИ, рддрдм рдХреНрдпрд╛ рд╣реЛрддрд╛ рд╣реИ рдЬрдм рдХреЗрд╡рд▓ рдПрдХ рдлрд╝рд╛рдЗрд▓ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЕрдкрд▓реЛрдб рдХреА рдЬрд╛ рд╕рдХрддреА рд╣реИ? рд▓реЙрдЧ рд╕реЗ рд▓реЙрдЧ рдХреЛ рджреЗрдЦреЗрдВред info.fileList рдореЗрдВ рд╕реНрдерд┐рддрд┐ рдЕрдкрд▓реЛрдб рд╣реЛ рд░рд╣реА рд╣реИ, рдкреНрд░рддрд┐рд╢рдд рдФрд░ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рджреЛрдиреЛрдВ рдЕрдкрд░рд┐рднрд╛рд╖рд┐рдд рд╣реИрдВ, рд▓реЗрдХрд┐рди http рдЕрдиреБрд░реЛрдз 200 рд╣реИ, рдХреГрдкрдпрд╛ рдорджрдж рдХрд░реЗрдВ

@PTGuan , рдЗрд╕ рдШрдЯрдХ рдХреЛ рдПрдХ-рдПрдХ рдХрд░рдХреЗ рдЕрдкрд▓реЛрдб рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдФрд░ рдмреИрдХ-рдПрдВрдб рдПрдкреАрдЖрдИ рдХреЛ рднреА рдПрдХ рдлрд╝рд╛рдЗрд▓ рджреНрд╡рд╛рд░рд╛ рдкреНрд░рд╛рдкреНрдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдЕрдкрд▓реЛрдб рдореЗрдВ рд╕рдлрд▓ рд╣реЛрдиреЗ рдХреЗ рдмрд╛рдж рдЖрдкрдХреЛ рдХреЙрд▓рдмреИрдХ рдореЗрдВ рдкреБрди: рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред рдЕрдкрдиреЗ рд╕рд╡рд╛рд▓ рдХреЛ рд╕рдорд╛рдкреНрдд рдХрд░рдиреЗ рдХреА рдЙрдореНрдореАрдж рд╣реИред

рдпрд╣ рд╕рдорд╕реНрдпрд╛ рд╣рд▓ рдирд╣реАрдВ рд╣реБрдИ рд╣реИ +1

Atd 3.8+ рдореЗрдВ, рдЕрднреА рднреА рдХреЗрд╡рд▓ рд╕реНрдЯреЗрдЯрд╕ = 'рд▓реЛрдбрд┐рдВрдЧ' рд╣реИ рдФрд░ рдХреЛрдИ рднреА рд╕реНрдЯреЗрдЯрд╕ рдирд╣реАрдВ рд╣реИред рдЗрд╕реЗ рдХреИрд╕реЗ рд╣рд▓ рдХрд░реЗрдВ?

рдХреНрдпрд╛ рд╣рд░ рд╕рдордп рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХрд╛ рдПрдХ рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рд╕рдорд╛рдзрд╛рди рд╣реИ, рд▓реЗрдХрд┐рди onSuccess рд╕рд╣реА http200 рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗ рд▓рд┐рдП рдЗрдВрддрдЬрд╛рд░ рдХрд░ рд╕рдХрддрд╛ рд╣реИ

рд╕рдорд╕реНрдпрд╛ рд╣рд▓ рд╣реЛ рдЧрдИ рд╣реИ, рдпрд╣ .setState ({fileList: [... fileList]}); рдпрд╣ рд╡рд╛рдХреНрдп рдмрд╣реБрдд рдорд╣рддреНрд╡рдкреВрд░реНрдг рд╣реИ, рдХреГрдкрдпрд╛ рдЗрд╕ рдкрд░ рдзреНрдпрд╛рди рджреЗрдВ рдпрджрд┐ рдЖрдкрдХреЛ рд╕рдорд╕реНрдпрд╛ рд╣реИ

@EnixCoda , рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ рдмрддрд╛рдИ рдЧрдИ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдкрдбрд╝рд╛ рд╣реИ, рдФрд░ рдХрднреА-рдХрднреА рдЬрдм рдореИрдВ рдЕрдкрд▓реЛрдб рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рд╣рдореЗрд╢рд╛ "рдЕрдкрд▓реЛрдбрд┐рдВрдЧ" рджрд┐рдЦрд╛рддрд╛ рд╣реИред

@withzhaoyu рдЦреИрд░, рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ, рдпрд╣рд╛рдБ рдЬреНрдпрд╛рджрд╛рддрд░ рд▓реЛрдЧ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░ рд░рд╣реЗ рд╣реИрдВред рд░рд┐рдПрдХреНрдЯ рд░рд╛рдЬреНрдп рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдЕрдкрд▓реЛрдб рдкреНрд░рдЧрддрд┐ рдХреЛ рд╕реНрдЯреЛрд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдпрд╣ рдШрдЯрдХ рдмрд╣реБрдд рд╡рд┐рд╢реНрд╡рд╕рдиреАрдп рдирд╣реАрдВ рд╣реИред

рдЗрд╕реЗ рдХреИрд╕реЗ рд╣рд▓ рдХрд░реЗрдВ! ! ! ! ! ! ! ! ! ! рдЕрдкрд▓реЛрдб рдХрд░ рд░рд╣рд╛ рд╣реИ

рдПрдирдХрд╛рдЙрдВрдЯрд░ +1

handleUploaderChange = ({file, fileList}) => {
  console.log('file vo =>', file, fileList);
  if (file.status === 'done') {
    fileList = fileList.map((item, index) => {
      // чЫ╕хЕ│цЦЗф╗╢хп╣ш▒бцХ░цНоца╝х╝ПхМЦхдДчРЖ
      return item;
    });
  }
   // щБ┐хЕНхОЯцЭечЪДцЦЗф╗╢ф╕вхд▒я╝Мш┐Щца╖хнРхЖЩх░▒хПпф╗еф║Ж
  this.setState({ fileList: file.status ? [...fileList] : this.state.fileList });
};

// ф╕Кф╝аш┐Ых║жхПпф╗ещАЪш┐ЗonProgressф╕нчЪДpercentцЭецОзхИ╢ца╖х╝Пя╝МшАМф╕НцШпfile.status
handleProgress = (event, file) => {
  let {fileList} = this.state;
  fileList = fileList.map(item => {
    if (item.uid === file.uid) {
      item.percent = event.percent;
    }
    return item;
  });
  this.setState({fileList});
};

рдЬрдм рддрдХ рдЖрдк рдкреГрд╖реНрдарднреВрдорд┐ рдХреЗ рд╕рд╛рде рдмрд╛рддрдЪреАрдд рдХрд┐рдП рдмрд┐рдирд╛ рдлрд╝рд╛рдЗрд▓ рдХреЗ рдмреЗрд╕ 64 рдХреЛ рдкрдврд╝рддреЗ рд╣реИрдВ, рддрдм рддрдХ рдХреНрдпрд╛ рдХрд░реЗрдВ

@ pingping92

handleChange = ({ file, fileList }) => {
  const { dispatch, nickname } = this.props;
  const reader = new FileReader();
  reader.onload = e => {
    const base64 = e.target.result;
  };
  reader.readAsDataURL(file.originFileObj);
}
<Upload
  onChange={this.handleAvatarChange}
/>

@AngryPowman , рдЖрдк рдЗрд╕ рдШрдЯрдХ рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдПрдХ рдЕрдиреНрдп рдШрдЯрдХ рдХреЛ

рдХрдордЬреЛрд░ рд╕реЗ рдпрд╣рд╛рдБ рдкреВрдЫреЗрдВ, рдХреНрдпрд╛ рдпрд╣ рдПрдХ рдЬрд╛рдирдмреВрдЭрдХрд░ рдбрд┐рдЬрд╝рд╛рдЗрди рд╣реИ рдХрд┐ рдирдИ рдЕрдкрд▓реЛрдб рдХреА рдЧрдИ рдлрд╝рд╛рдЗрд▓ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ url рдкреНрд░рджрд╛рди рдирд╣реАрдВ рдХрд░рддреА рд╣реИ?

image

рдкреНрд░рдлреБрд▓реНрд▓рд┐рддред рдЕрдм рдлрд┐рд▓реНрдордХрд╛рд░ рдореЗрдВ рд╕реНрдерд┐рддрд┐ рдЕрднреА рднреА рдЕрдкрд▓реЛрдб рд╣реЛ рд░рд╣реА рд╣реИ, рднрд▓реЗ рд╣реА рд╡рд╣ рдирд┐рдпрдВрддреНрд░рд┐рдд рд╣реЛ рдЬрд╛рдП, рдлрд┐рд░ рднреА рдореИрдВрдиреЗ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреА рд╕реНрдерд┐рддрд┐ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХреА рд╣реИредрд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╣рд▓ рдмрд┐рд▓реНрдХреБрд▓ рдирд╣реАрдВ рд╣реИ

рдХреНрдпрд╛ рдореИрдВ рдпрд╣ рдкреВрдЫ рд╕рдХрддрд╛ рд╣реВрдВ рдХрд┐ рдХреНрдпрд╛ рдлрд╝рд╛рдЗрд▓ рдЕрдкрд▓реЛрдб рд╡рд┐рдлрд▓рддрд╛ рдзреНрд╡рдЬ рдмреИрдХрдПрдВрдб рд╕реЗ рд╡рд╛рдкрд╕ рдЖ рдЧрдпрд╛ рд╣реИ -> file.response.status, рдШрдЯрдХ рдЗрд╕ рд╕рдордп рдЗрдВрдЯрд░рд╕реЗрдкреНрдЯ рдирд╣реАрдВ рд╣реИ, рдФрд░ рдЬрдм рдореИрдВ рдкрд╣реБрдВрдЪрддрд╛ рд╣реВрдВ, рддреЛ рдлрд╝рд╛рдЗрд▓ рд╕реВрдЪреА рдкреНрд░рджрд░реНрд╢рд┐рдд рдХреА рдЧрдИ рд╣реИред рдореИрдВ рдмреИрдХреЗрдВрдб рджреНрд╡рд╛рд░рд╛ рд▓реМрдЯрд╛рдП рдЧрдП рдзреНрд╡рдЬ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдлрд╝рд╛рдЗрд▓ рд╕реВрдЪреА рдХреЛ рд╕рд╛рдлрд╝ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред рдпрд╣ рдХреИрд╕реЗ рдХрд░рдирд╛ рд╣реИ?

// рдореИрдВрдиреЗ рдЧрдбреНрдвреЗ рдкрд░ рдХрджрдо рд░рдЦрд╛ рдФрд░ рд╕реНрд░реЛрдд рдХреЛрдб рдХреЛ рджреЗрдЦрд╛ рдФрд░ рдкрд╛рдпрд╛ рдХрд┐ рдореИрдВрдиреЗ рдЬрд┐рди рд╕рдорд╕реНрдпрд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рд╣реИ рд╡реЗ рдЗрд╕ рдкреНрд░рдХрд╛рд░ рд╣реИрдВ
// 1.рд╕реНрдЯреЗрдЯ рдЪрд░ рдирд╛рдордХрд░рдг
// рдЦрд░рд╛рдм

/*
ш┐ЩщЗМф╕║ф║ЖцЦ╣ф╛┐ ф╜┐чФиф║Жф╕ОхРОчлпш┐ФхЫЮхРМца╖чЪДхнЧцо╡ хп╝шЗ┤хЗ║ф║ЖщЧощвШ ш┐ЩщЗМх┐Ещб╗чФиfileListя╝Мф╕НчД╢ц║РчаБф╕н this.state.fileListшО╖хПЦцШпчй║ х░▒ф╝Ъхп╝шЗ┤хЬиonSuccessф╕нхМ╣щЕНхд▒ш┤ея╝Мф╗ОшАМф╕Нф╝ЪхЬишзжхПСчммф║МцмбonChangeф║Лф╗╢
*/
state = {imgList:[]} 
<Upload fileList={this.state.imgList} onChange={this.onFileChange} />

// рдорд╛рд▓

state = {fileList:[]} 
<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

// 2. onFileChange рдХрд╛ рдкреИрд░рд╛рдореАрдЯрд░ рдПрдХ рдУрдмреНрдЬ рд╣реИ (рдлрд╛рдЗрд▓ рдФрд░ рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЗ рджреЛ рдЧреБрдгреЛрдВ рд╕рд╣рд┐рдд) рдФрд░ this.setState ({fileList: [... fileList]}); рдСрдирдлрд╛рдЗрд▓рдЪреЗрдВрдЬ рдлрд╝рдВрдХреНрд╢рди рдореЗрдВ рдмреБрд▓рд╛рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред

state = {fileList:[]} 
onFileChange({file,fileList}) {
  if ( ... ) {
    ...
  } else {
    ...
  }
  // always setState
  this.setState({ fileList: [...fileList] });
}
<Upload fileList={this.state.fileList} onChange={this.onFileChange} />

рд╕рдВрдпреЛрдЧ рд╕реЗ рдХреЛрдИ рдЕрдВрдЧреНрд░реЗрдЬреА? рдореЗрд░реЗ рдкрд╛рд╕ рдпрд╣ рдореБрджреНрджрд╛ рд╣реИред

@developdeez рдЖрдкрдХрд╛ рдореБрджреНрджрд╛ рдХреНрдпрд╛ рд╣реИ? рдЪреАрдВрдЯреА рдбрд┐рдЬрд╛рдЗрди рдХреЗ рдХрд┐рд╕ рд╕рдВрд╕реНрдХрд░рдг рдХрд╛ рдЖрдк рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ?
рдореИрдВрдиреЗ рдкрд╣рд▓реЗ AntD 3.0 рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдФрд░ рдХреБрдЫ рдорд╣реАрдиреЛрдВ рдХреЗ рд▓рд┐рдП рдЗрд╕ рдЕрдкрд▓реЛрдб рдШрдЯрдХ рдкрд░ рдХрд╛рдо рдХрд┐рдпрд╛ред рдореЗрд░реЗ рд▓рд┐рдП рд╕рдм рдХреБрдЫ рдЕрдЪреНрдЫрд╛ рд╣реЛ рдЧрдпрд╛ред рдореЗрд░реЗ рдкрд╛рд╕ рдХреЛрдИ рдореБрджреНрджрд╛ рдирд╣реАрдВ рдерд╛ред рдореЗрд░реЗ рдкрд╛рд╕ рд╢реБрд░реБрдЖрдд рдореЗрдВ рдХреБрдЫ рдореБрджреНрджрд╛ рдерд╛ рд▓реЗрдХрд┐рди рдореИрдВрдиреЗ рдЖрдЦрд┐рд░рдХрд╛рд░ рдЙрди рд╕рднреА рдХреЛ рдареАрдХ рдХрд░ рд▓рд┐рдпрд╛ред рдЗрд╕рд▓рд┐рдП рдореИрдВ рд╕рднреА рд╕рд╛рдорд╛рдиреНрдп рдореБрджреНрджреЛрдВ рдХреЛ рд╣рд▓ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкрд░реНрдпрд╛рдкреНрдд рдЖрд╢реНрд╡рд╕реНрдд рд╣реВрдВред

@swordguard , рдЪреАрдВрдЯреА 3.9.3

рд╕рдорд╕реНрдпрд╛ рдореВрд▓ рд░реВрдк рд╕реЗ UI рдХреЗ рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЛ рдирд┐рдпрдВрддреНрд░рд┐рдд рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рд╣реИред рдореИрдВ рдЕрдкрд▓реЛрдб рдФрд░ рдЫрд╡рд┐ рдФрд░ рдПрдХ рдмрдЯрди рдФрд░ рдХреЛрдИ рдХрд┐рд╕реНрдордд рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рдЗрд╕реЗ рд╕рд╛рдл рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рд╣реИред

рдореИрдВрдиреЗ рдпрд╣рд╛рдВ рдХреБрдЫ рд╕реИрдВрдкрд▓ рдХреЛрдб рдХреЗ рд╕рд╛рде рдЯрд┐рдХрдЯ рднреА рдмрдирд╛рдпрд╛: https://github.com/ant-design/ant-design/issues/12722#event -1913716771

рдХреНрдпрд╛ рдЖрдк рдРрд╕рд╛ рдХрд░ рдкрд╛рдП рд╣реИрдВ?

рдЧрдбреНрдвреЗ +1 рдХреЗ рдорд╛рдорд▓реЗ рдореЗрдВ, рдореИрдВрдиреЗ рдХреЛрдИ рд▓рд╛рдн рдЙрдард╛рдиреЗ рдХреЗ this.setState({ fileList: [...fileList] }) , рдШрдЯрдХ рдХреЗ рд▓рд┐рдП PureComponent рдкрд░рд┐рд╡рд░реНрддрди рдФрд░ рдпрд╣ рдХреЛрдИ рдЕрдВрддрд░ рдирд╣реАрдВ рд╣реИ, рд╕реНрдерд┐рддрд┐ рдХреЗрд╡рд▓ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдкрд░ рд░реБрдХрддреА рд╣реИ рдЬрдм рддрдХ рдХрд┐ рдлрд╝рд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЛ рдкреНрд░реЙрдкрд░ рдореЗрдВ рдирд╣реАрдВ рдбрд╛рд▓рд╛ рдЬрд╛рддрд╛ рд╣реИ, рдХреГрдкрдпрд╛ рдЖрдкрд╕реЗ рдмрд╣реБрдд рдХреБрдЫ рдкреВрдЫреЗрдВ

рдЧрдбреНрдвреЗ +1 рдХреЗ рдорд╛рдорд▓реЗ рдореЗрдВ, рдореИрдВрдиреЗ рдХреЛрдИ рд▓рд╛рдн рдЙрдард╛рдиреЗ рдХреЗ this.setState({ fileList: [...fileList] }) , рдШрдЯрдХ рдХреЗ рд▓рд┐рдП PureComponent рдкрд░рд┐рд╡рд░реНрддрди рдФрд░ рдпрд╣ рдХреЛрдИ рдЕрдВрддрд░ рдирд╣реАрдВ рд╣реИ, рд╕реНрдерд┐рддрд┐ рдХреЗрд╡рд▓ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдкрд░ рд░реБрдХрддреА рд╣реИ рдЬрдм рддрдХ рдХрд┐ рдлрд╝рд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЛ рдкреНрд░реЙрдкрд░ рдореЗрдВ рдирд╣реАрдВ рдбрд╛рд▓рд╛ рдЬрд╛рддрд╛ рд╣реИ, рдХреГрдкрдпрд╛ рдЖрдкрд╕реЗ рдмрд╣реБрдд рдХреБрдЫ рдкреВрдЫреЗрдВ

рдЖрдк рдХреЛрд╢рд┐рд╢ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рдлрд╝рд╛рдЗрд▓ рдХреЛ рдПрдХ рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЗ рд░реВрдк рдореЗрдВ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░реЗрдВ ~~ == ~~
// рд╣рдореЗрд╢рд╛ рд╕реЗрдЯ рдХрд░реЗрдВ
this.setState ({fileList: JSON.stringify ([info.file])});

@ pingping92

handleChange = ({ file, fileList }) => {
  const { dispatch, nickname } = this.props;
  const reader = new FileReader();
  reader.onload = e => {
    const base64 = e.target.result;
  };
  reader.readAsDataURL(file.originFileObj);
}
<Upload
  onChange={this.handleAvatarChange}
/>

рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рдлрд╝рд╛рдЗрд▓ рдСрдмреНрдЬреЗрдХреНрдЯ рдореЗрдВ рдХреЛрдИ рдЙрддреНрдкрддреНрддрд┐рдлрд▓ рд╡рд┐рд╢реЗрд╖рддрд╛ рдирд╣реАрдВ рд╣реИред рдХреНрдпрд╛ рдпрд╣ рд╡рд┐рд╢реЗрд╖рддрд╛ рдЕрдкрд▓реЛрдб рд╣реЛрдиреЗ рдХреЗ рдмрд╛рдж рд╣реА рджрд┐рдЦрд╛рдИ рджреЗрддреА рд╣реИ? рд▓реЗрдХрд┐рди рдЕрдм рдкреГрд╖реНрдарднреВрдорд┐ рдкрд░ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдФрд░ рд╕реАрдзреЗ рдЖрдзрд╛рд░ 64 рд╕рд╛рдордЧреНрд░реА рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреА рдХреЛрдИ рдпреЛрдЬрдирд╛ рдирд╣реАрдВ рд╣реИред

this.setState({ fileList: [...fileList] }); рд╣рд╛рд▓рд╛рдВрдХрд┐ рдпрд╣ рдХреНрд▓рд╛рдЗрдВрдЯ рджреНрд╡рд╛рд░рд╛ рдкреНрд░рджрд░реНрд╢рд┐рдд рд╕рдорд╕реНрдпрд╛ рдХреЛ рд╣рд▓ рдХрд░ рд╕рдХрддрд╛ рд╣реИ

рд▓реЗрдХрд┐рди рдорд╛рдВрдЧ рдХреЗ рдЕрдиреБрд╕рд╛рд░, рдлрд╝рд╛рдЗрд▓ рдЕрдкрд▓реЛрдб рд╣реЛрдиреЗ рдХреЗ рдмрд╛рдж, рдкреГрд╖реНрдарднреВрдорд┐ рдПрдХ рдлрд╝рд╛рдЗрд▓ рдЖрдИрдбреА рджреЗрддрд╛ рд╣реИред рдЬрдм рдореИрдВ рд╕рдмрдорд┐рдЯ рдкрд░ рдХреНрд▓рд┐рдХ рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдореБрдЭреЗ рдЖрдИрдбреА рд╡рд╛рдкрд╕ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ, рд▓реЗрдХрд┐рди рд╕реНрдерд┐рддрд┐ рд╣рдореЗрд╢рд╛ рдЕрдкрд▓реЛрдб рд╣реЛ рд░рд╣реА рд╣реИ, рдЗрд╕рд▓рд┐рдП рдореБрдЭреЗ рдкреГрд╖реНрдарднреВрдорд┐ рдЗрдВрдЯрд░рдлрд╝реЗрд╕ рд╕реЗ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдирд╣реАрдВ рдорд┐рд▓ рд╕рдХрддреА рд╣реИред
@ afc163

рдПрдХ рд╣реА рдореБрджреНрджрд╛ рдпрд╣рд╛рдБред рдШрдЯрдХ Upload рдХреЙрд▓рдмреИрдХ рдореЗрдВ action рд╕рдВрдкрддреНрддрд┐ рдХрд╛ рдЖрд╣реНрд╡рд╛рди рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ, рд▓реЗрдХрд┐рди UploadFile рддрд░реНрдХ рдореЗрдВ originFileObj рдЕрд░реНрдерд╛рдд undefined ред рдХреЛрдИ рднреА рд╕реБрд░рд╛рдЧ рдмреИрдХрдПрдВрдб рдкрд░ рдлрд╝рд╛рдЗрд▓ рдЕрдкрд▓реЛрдб рдХрд┐рдП рдмрд┐рдирд╛ Upload рдЪреАрдВрдЯреА рдШрдЯрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдлрд╝рд╛рдЗрд▓ рд╕рд╛рдордЧреНрд░реА рдХреЛ рдХреИрд╕реЗ рдкрдврд╝реЗрдВ?

рдПрдХ рд╣реА рдореБрджреНрджрд╛ рдпрд╣рд╛рдБред рдШрдЯрдХ Upload рдХреЙрд▓рдмреИрдХ рдореЗрдВ action рд╕рдВрдкрддреНрддрд┐ рдХрд╛ рдЖрд╣реНрд╡рд╛рди рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ, рд▓реЗрдХрд┐рди UploadFile рддрд░реНрдХ рдореЗрдВ originFileObj рдЕрд░реНрдерд╛рдд undefined ред рдХреЛрдИ рднреА рд╕реБрд░рд╛рдЧ рдмреИрдХрдПрдВрдб рдкрд░ рдлрд╝рд╛рдЗрд▓ рдЕрдкрд▓реЛрдб рдХрд┐рдП рдмрд┐рдирд╛ Upload рдЪреАрдВрдЯреА рдШрдЯрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдлрд╝рд╛рдЗрд▓ рд╕рд╛рдордЧреНрд░реА рдХреЛ рдХреИрд╕реЗ рдкрдврд╝реЗрдВ?

рджрд░рдЕрд╕рд▓, рдЖрдкрдХреЛ рдУрд░рд┐рдЬрд┐рдирд▓ рдУрдмреАрдЬ рдХреА рдЬрд░реВрд░рдд рдирд╣реАрдВ рд╣реИ, рдмрд╕ рдлрд╛рдЗрд▓ рдСрдмреНрдЬреЗрдХреНрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЙрдиреНрд╣реЛрдВрдиреЗ рдУрд░рд┐рдЬрд┐рдирд▓ рдУрдмреАрдЬ рдХреЛ рд╣рдЯрд╛ рджрд┐рдпрд╛ рд╣реИ

рдореИрдВ рдпрд╣рд╛рдВ рд╣реВрдВ рдХреНрдпреЛрдВрдХрд┐ рдореИрдВ рдпрд╣ рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛ рдХрд┐ рдореИрдВрдиреЗ рдЕрдкрдиреА рд╕реВрдЪреА рдореЗрдВ рдЙрди рдлрд╝рд╛рдЗрд▓реЛрдВ рдХреЛ рдирд╣реАрдВ рдЬреЛрдбрд╝рд╛ рдЬреЛ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдореЗрдВ рд╕рдлрд▓ рдирд╣реАрдВ рд╣реБрдИрдВред рджреВрд╕рд░реЗ рд╢рдмреНрджреЛрдВ рдореЗрдВ, рдЕрдЧрд░ рдореЗрд░реЗ file.status === "error" рдореИрдВ рдЙрд╕ рдлрд╝рд╛рдЗрд▓ рдХреЛ UI рдореЗрдВ рдкреНрд░рджрд░реНрд╢рд┐рдд рдирд╣реАрдВ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ (рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ, рдЙрд╕ рджреЛрд╖рдкреВрд░реНрдг рдлрд╝рд╛рдЗрд▓ рдХреЛ рдЕрдиреБрд░реЛрдз рдореЗрдВ рд╕рдмрдорд┐рдЯ рдирд╣реАрдВ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛)ред рдореИрдВрдиреЗ рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рдирд┐рдпрдВрддреНрд░рд┐рдд рдШрдЯрдХ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдФрд░ fileList рд▓рд╛рдн рдЙрдард╛рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреАред рдореИрдВ "рдЕрдкрд▓реЛрдбрд┐рдВрдЧ" рд╕реЗ рдХрднреА рдирд╣реАрдВ рдмрджрд▓ рдлрд╝рд╛рдЗрд▓ рд╕реНрдерд┐рддрд┐ рдХреЗ рдореБрджреНрджреЗ рдореЗрдВ рднрд╛рдЧ рдЧрдпрд╛ред

рдЗрд╕рд▓рд┐рдП рдореИрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЗ рдХрд╛рд░рдг рдирд┐рдпрдВрддреНрд░рд┐рдд рдШрдЯрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╡рд╛рдкрд╕ рдЪрд▓рд╛ рдЧрдпрд╛ред рдореИрдВ normFile рд╕реБрдирд┐рд╢реНрдЪрд┐рдд рдХрд░рдиреЗ рдХреЗ рджреНрд╡рд╛рд░рд╛ рд╡рд╛рдВрдЫрд┐рдд рдЕрдиреБрд░реЛрдз рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдерд╛, рдХреЗрд╡рд▓ "рддреНрд░реБрдЯрд┐" рдирд╣реАрдВ рд╣реИ рдХрд┐ рдлрд╝рд╛рдЗрд▓реЗрдВ рдЬреЛрдбрд╝рддрд╛ рд╣реИред

normFile = (e) => {
    if (Array.isArray(e)) {
      return e.filter(x => x.status !== "error");
    }
    return e && e.fileList.filter(x => x.status !== "error");
  };
const generationRequestDecorator = getFieldDecorator('generationRequest', {
      rules: [
        {
          required: true,
          message: 'Please upload your config'
        }
      ],
      valuePropName: 'fileList',
      getValueFromEvent: this.normFile,
    });
const props = {
      name: 'file',
      action: '/api/to/upload',
      multiple: true,
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };
const generationRequestArea = generationRequestDecorator(
      <Upload {...props}>
        <Button>
          <Icon type="upload"/> Click to Upload
        </Button>
      </Upload>
    );

рдлрд┐рд░ рд╕реЗ, рдореБрдЭреЗ рдкреВрд░реА рдЙрдореНрдореАрдж рд╣реИ рдХрд┐ atd рдЯреАрдо рдореЗрд░реЗ рд╕реБрдЭрд╛рд╡ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░ рд╕рдХрддреА рд╣реИ (рдкрд╣рд▓реЗ рдпрд╣рд╛рдБ рд▓рд┐рдЦрд╛ рдерд╛):

рдлрд╝рд╛рдЗрд▓ рдЕрдкрд▓реЛрдб рд╕реНрдЯреЗрдЯреНрд╕ рдХреЛ рдЗрдВрд╕реНрдЯреЗрдВрд╕ рдХреА рд╕реНрдерд┐рддрд┐ рдХреЗ рдмрдЬрд╛рдп Upload рдЗрдВрд╕реНрдЯреЗрдВрд╕ рдкрд░ рдмрдирд╛рдП рд░рдЦреЗрдВред bc рд╕реНрдЯреЗрдЯ рд╣рдореЗрд╢рд╛ рд╕рд┐рдВрдХреНрд░реЛрдирд╛рдЗрдЬрд╝ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ!

рдореЗрд░реЗ рдкреАрдЫреЗ, рдкреГрд╖реНрдарднреВрдорд┐ рдореЗрдВ рджрд┐рдпрд╛ рдЧрдпрд╛ рдбреЗрдЯрд╛ рдкреГрд╖реНрда рдкрд░ рдЕрд▓рдЧ рд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛, Upload рд╣рдореЗрд╢рд╛ рдирд╡реАрдирддрдо рдЕрдкрд▓реЛрдб рд╕рдВрдЧреНрд░рд╣реАрдд рдХрд░реЗрдЧрд╛

@yoonwaiyan
`рд╣реИрдВрдбрд▓ рдЪреЗрдВрдЬ = (рдЬрд╛рдирдХрд╛рд░реА) => {
fileList = info.fileList;
this.setState ({fileList: fileList.slice ()});
рдЕрдЧрд░ (info.file.status === 'рдХрд┐рдпрд╛') {
message.success (info.file.name + "рдЕрдкрд▓реЛрдб рд╕рдлрд▓рддрд╛");
fileList = fileList.slice (-1);
fileList = fileList.map ((рдлрд╝рд╛рдЗрд▓) => {
рдЕрдЧрд░ (рдлрд╝рд╛рдЗрд▓.рдЖрд╡реЗрджрди) {
file.url = file.responseред # рдЕрдкрдиреЗ рд░рд┐рд╕реНрдкреЙрдиреНрд╕ рдХреА рдЬрд╛рдБрдЪ рдХрд░реЗрдВ рдФрд░ рд╕рд░реНрд╡рд░ рд╕реЗ рдЕрдкрдирд╛ рд╕реНрд╡рдпрдВ рдХрд╛ рдпреВрдЖрд░рдПрд▓ рдЪреБрдиреЗрдВ;
}
рд░рд┐рдЯрд░реНрди рдлрд╛рдЗрд▓;
});

  fileList = fileList.filter((file) => {
    if (file.response) {
      return file.response.#check your respone and choose your own respone status code back from server# === 200;
    }
    return false;
  });

  this.setState({ fileList });
} else if (info.file.status === 'error') {
  message.error(info.file.name + " upload failed");
}

} `

рдЗрд╕реЗ рдЗрд╕реНрддреЗрдорд╛рд▓ рдХрд░реЗред

рдореБрдЭреЗ рднреА рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдкрдбрд╝рд╛ред рдкрд░реАрдХреНрд╖рдг рдХреА рдПрдХ рд▓рд╣рд░ рдХреЗ рдмрд╛рдж, рдореБрдЭреЗ рд▓рдЧрд╛ рдХрд┐ рд╕рдорд╕реНрдпрд╛ рдкрд╛рдИ рдЧрдИред

handleChange = info => {
    let fileList = info.fileList;
    fileList.filter(file => file.status === 'done');
    this.setState({fileList});
}

рдкрд░реАрдХреНрд╖рдг рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╢рд╛рдорд┐рд▓ рд╣реИрдВ: рдпрджрд┐ рдЖрдк рд╕реАрдзреЗ рд╣реИрдВрдбрд▓ рдореЗрдВ this.setState({fileList}) рдХрд╛ рдкреНрд░рджрд░реНрд╢рди рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЗрд╕реЗ рд╕рд╛рдорд╛рдиреНрдп рд░реВрдк рд╕реЗ рдирд┐рд╖реНрдкрд╛рджрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

рдореЗрд░рд╛ рдкрд┐рдЫрд▓рд╛ рд▓реЗрдЦрди рдЗрд╕реА рдХреЗ рд╕рдорд╛рди рд╣реИред рдлрд╝рд┐рд▓реНрдЯрд░ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдпрд╣ рдкрд╣рд▓реА рдирд┐рд╖реНрдкрд╛рджрди рдХреА рдУрд░ рдЬрд╛рддрд╛ рд╣реИ, рдлрд╝рд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЛ рдПрдХ рдЦрд╛рд▓реА рд╕рд░рдгреА рдореЗрдВ рдлрд╝рд┐рд▓реНрдЯрд░ рдХрд░рддрд╛ рд╣реИред рдЗрд╕рд▓рд┐рдП, рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреА рд╣рдореЗрд╢рд╛ рдХреЗрд╡рд▓ рдПрдХ рд╕реНрдерд┐рддрд┐ рд╣реЛрддреА рд╣реИред
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдпрджрд┐ рдЖрдк рдлрд╝рд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЛ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рдПрдХ рдЦрд╛рд▓реА рд╕рд░рдгреА рдкрд░ рд╕реЗрдЯ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдпрд╣ рдСрдирдХреЗрдВрдЬ рдЗрд╡реЗрдВрдЯ рдХреЗ рдирд┐рд░рдВрддрд░ рдирд┐рд╖реНрдкрд╛рджрди рдХреЛ рдкреНрд░рднрд╛рд╡рд┐рдд рдХрд░реЗрдЧрд╛ред рдлрд╝рд┐рд▓реНрдЯрд░ рдХреА рд╢рд░реНрддреЛрдВ рдХреЛ рдереЛрдбрд╝рд╛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рд╕рд╛рдордирд╛ рдХреА рдЧрдИ рд╕рдорд╕реНрдпрд╛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд╣рд▓ рд╣реЛ рдЧрдИ рд╣реИред

рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рд░рдЦрд░рдЦрд╛рд╡ рдХреЗ рддрд╣рдд рдЗрди рджреЛрдиреЛрдВ рдЧреБрдгреЛрдВ рдХреЗ рдмреАрдЪ рдХреЛрдИ рдмрд╛рдзреНрдпрдХрд╛рд░реА рд╕рдВрдмрдВрдз рд╣реИ? @Imxiongying

рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рдорд╛рдорд▓реЗ рдореЗрдВ, рдлрд╝рд┐рд▓реНрдЯрд░рд┐рдВрдЧ (рдкреВрд░реНрдг рдирд┐рдпрдВрддреНрд░рдг рдЕрдкрд▓реЛрдб рд╕реВрдЪреА) рдХреЗ рд╕рд╛рде рдРрд╕рд╛ рдорд╛рдорд▓рд╛ рд╣реИред рдореБрдЭреЗ рдЖрд╢реНрдЪрд░реНрдп рд╣реИ рдХрд┐ рдХреНрдпрд╛ рдореЗрд░реЗ рдиреЗрдЯрд╡рд░реНрдХ рдореЗрдВ рдХреЛрдИ рд╕рдорд╕реНрдпрд╛ рд╣реИред рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ рднреА рдпрд╣ рд╕реНрдерд┐рддрд┐ рд╣реИред

рдореБрдЭреЗ рднреА рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдкрдбрд╝рд╛ред рдкрд░реАрдХреНрд╖рдг рдХреА рдПрдХ рд▓рд╣рд░ рдХреЗ рдмрд╛рдж, рдореБрдЭреЗ рд▓рдЧрд╛ рдХрд┐ рд╕рдорд╕реНрдпрд╛ рдкрд╛рдИ рдЧрдИред

handleChange = info => {
    let fileList = info.fileList;
    fileList.filter(file => file.status === 'done');
    this.setState({fileList});
}

рдкрд░реАрдХреНрд╖рдг рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╢рд╛рдорд┐рд▓ рд╣реИрдВ: рдпрджрд┐ рдЖрдк рд╕реАрдзреЗ рд╣реИрдВрдбрд▓ рдореЗрдВ this.setState({fileList}) рдХрд╛ рдкреНрд░рджрд░реНрд╢рди рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЗрд╕реЗ рд╕рд╛рдорд╛рдиреНрдп рд░реВрдк рд╕реЗ рдирд┐рд╖реНрдкрд╛рджрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред

рдореЗрд░рд╛ рдкрд┐рдЫрд▓рд╛ рд▓реЗрдЦрди рдЗрд╕реА рдХреЗ рд╕рдорд╛рди рд╣реИред рдлрд╝рд┐рд▓реНрдЯрд░ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдпрд╣ рдкрд╣рд▓реА рдирд┐рд╖реНрдкрд╛рджрди рдХреА рдУрд░ рдЬрд╛рддрд╛ рд╣реИ, рдлрд╝рд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЛ рдПрдХ рдЦрд╛рд▓реА рд╕рд░рдгреА рдореЗрдВ рдлрд╝рд┐рд▓реНрдЯрд░ рдХрд░рддрд╛ рд╣реИред рдЗрд╕рд▓рд┐рдП, рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреА рд╣рдореЗрд╢рд╛ рдХреЗрд╡рд▓ рдПрдХ рд╕реНрдерд┐рддрд┐ рд╣реЛрддреА рд╣реИред
рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдпрджрд┐ рдЖрдк рдлрд╝рд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЛ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рдПрдХ рдЦрд╛рд▓реА рд╕рд░рдгреА рдкрд░ рд╕реЗрдЯ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдпрд╣ рдСрдирдХреЗрдВрдЬ рдЗрд╡реЗрдВрдЯ рдХреЗ рдирд┐рд░рдВрддрд░ рдирд┐рд╖реНрдкрд╛рджрди рдХреЛ рдкреНрд░рднрд╛рд╡рд┐рдд рдХрд░реЗрдЧрд╛ред рдлрд╝рд┐рд▓реНрдЯрд░ рдХреА рд╢рд░реНрддреЛрдВ рдХреЛ рдереЛрдбрд╝рд╛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рд╕рд╛рдордирд╛ рдХреА рдЧрдИ рд╕рдорд╕реНрдпрд╛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд╣рд▓ рд╣реЛ рдЧрдИ рд╣реИред

рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рд░рдЦрд░рдЦрд╛рд╡ рдХреЗ рддрд╣рдд рдЗрди рджреЛрдиреЛрдВ рдЧреБрдгреЛрдВ рдХреЗ рдмреАрдЪ рдХреЛрдИ рдмрд╛рдзреНрдпрдХрд╛рд░реА рд╕рдВрдмрдВрдз рд╣реИ? @Imxiongying

рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рдорд╛рдорд▓реЗ рдореЗрдВ, рдлрд╝рд┐рд▓реНрдЯрд░рд┐рдВрдЧ (рдкреВрд░реНрдг рдирд┐рдпрдВрддреНрд░рдг рдЕрдкрд▓реЛрдб рд╕реВрдЪреА) рдХреЗ рд╕рд╛рде рдРрд╕рд╛ рдорд╛рдорд▓рд╛ рд╣реИред рдореБрдЭреЗ рдЖрд╢реНрдЪрд░реНрдп рд╣реИ рдХрд┐ рдХреНрдпрд╛ рдореЗрд░реЗ рдиреЗрдЯрд╡рд░реНрдХ рдореЗрдВ рдХреЛрдИ рд╕рдорд╕реНрдпрд╛ рд╣реИред рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ рднреА рдпрд╣ рд╕реНрдерд┐рддрд┐ рд╣реИред

рдирд┐рдпрдВрддреНрд░рд┐рдд рд╕реНрдерд┐рддрд┐ рдореЗрдВ, рдлрд╝рд╛рдЗрд▓ рдХреЛ рдСрди-рд▓рд╛рдЗрди рдХреЙрд▓рдмреИрдХ рдореЗрдВ рдЦрд╛рд▓реА рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕реЗрдЯ рдХрд░реЗрдВ, рдФрд░ рдЕрдкрд▓реЛрдб рдШрдЯрдХ рдХреЗ рдЕрдВрджрд░ рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЛ рдПрдХ рдЦрд╛рд▓реА рд╕рд░рдгреА рдореЗрдВ рдЕрдкрдбреЗрдЯ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред рдЗрд╕рдХреЗ рдЖрдВрддрд░рд┐рдХ рдСрдирд╕реНрдХреНрдпреВ, рдСрдирдкреНрд░реЛрдЧреНрд░реЗрдб рдФрд░ рдЕрдиреНрдп рддрд░реНрдХ рдореЗрдВ, рдлрд╝рд╛рдЗрд▓ рдЬреЛ рдЗрд╡реЗрдВрдЯ рдХреЛ рдЯреНрд░рд┐рдЧрд░ рдХрд░рддреА рд╣реИ, рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рд╕реЗ рдорд┐рд▓ рдЬрд╛рдПрдЧреАред рдЪрд╛рд▓реВ рдХреЙрд▓рдмреИрдХ рдЯреНрд░рд┐рдЧрд░ рд╣реИ

@luruozhou рдЙрд╣реНрд╣реНрд╣реНрд╣ рдУрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣ рдЕрд╣реНрд╣реНрд╣реНрд╣рд╣реНрд╣ред

@yidianier handleProgress рдЗрд╕ рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдХрд╣рд╛рдБ рдХрд╣рд╛ рдЬрд╛рддрд╛ рд╣реИ?

@yidianier handleProgress рдЗрд╕ рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдХрд╣рд╛рдБ рдХрд╣рд╛ рдЬрд╛рддрд╛ рд╣реИ?

onProgress = {} this.handleProgress

рдирд┐рдпрдВрддреНрд░рд┐рдд рдШрдЯрдХреЛрдВ рдФрд░ рд╡рд┐рд╢реБрджреНрдз рд░реВрдк рд╕реЗ рдмрд╛рд╣рд░реА рдирд┐рд░реНрднрд░ рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдЙрдирдХреЗ рд╕рдВрдмрдВрдзрд┐рдд рдкрд░рд┐рджреГрд╢реНрдпреЛрдВ рдореЗрдВ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдирд┐рдпрдВрддреНрд░рд┐рдд рдШрдЯрдХреЛрдВ рдХреЛ рддрд╛рд░реНрдХрд┐рдХ рд░реВрдк рд╕реЗ рдЪреАрдВрдЯреА рдореЗрдВ рдирд┐рдпрдВрддреНрд░рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЬреИрд╕реЗ рдбреНрд░реЙрдк-рдбрд╛рдЙрди рдмреЙрдХреНрд╕ рдХреЛ рд░рджреНрдж рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд░рд┐рдХреНрдд рдХреНрд▓рд┐рдХ рдХрд░рдирд╛, рдЖрджрд┐ред рдпрджрд┐ рдпреЗ рд╕рднреА рдмрд╛рд╣рд░реА рд░реВрдк рд╕реЗ рдирд┐рдпрдВрддреНрд░рд┐рдд рд╣реИрдВ, рддреЛ рдЖрдк рд╡рд┐рд╢реЗрд╖ рдорд╣рд╕реВрд╕ рдХрд░реЗрдВрдЧреЗ рдкрд░реЗрд╢рд╛рдиреА, рдЗрд╕рд▓рд┐рдП рдирд┐рдпрдВрддреНрд░рд┐рдд рдШрдЯрдХ рдмреБрдирд┐рдпрд╛рджреА рддрд░реНрдХ рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рд╣реИ, рдШрдЯрдХ рдбрд┐рдЬрд╛рдЗрди рдореЗрдВ рдХреЛрдИ рд╕рдорд╕реНрдпрд╛ рдирд╣реАрдВ рд╣реИ, рдЗрд╕рд▓рд┐рдП рд╢рд┐рдХрд╛рдпрдд рди рдХрд░реЗрдВред ред ред

@рд╕рдм

@ afc163

@yidianier handleProgress рдЗрд╕ рдлрд╝рдВрдХреНрд╢рди рдХреЛ рдХрд╣рд╛рдБ рдХрд╣рд╛ рдЬрд╛рддрд╛ рд╣реИ?

onProgress = {} this.handleProgress

рдзрдиреНрдпрд╡рд╛рдж

рдпрд╣ рд╕рдорд╕реНрдпрд╛ 3.13.1 @ afc163 рдореЗрдВ рднреА рд╣реЛрдЧреА

@ xiaolong1024 # 14780

рдпрд╣ рд╕рдорд╕реНрдпрд╛ рдЕрднреА рднреА рд╣реЛрддреА рд╣реИ, рдХреНрдпрд╛ рдпрд╣ рдЖрд░рд╕реА-рдлреЙрд░реНрдо рд╕реЗ рд╕рдВрдмрдВрдзрд┐рдд рд╣реИ?

handleUploaderChange = ({file, fileList}) => {
  console.log('file vo =>', file, fileList);
  if (file.status === 'done') {
    fileList = fileList.map((item, index) => {
      // чЫ╕хЕ│цЦЗф╗╢хп╣ш▒бцХ░цНоца╝х╝ПхМЦхдДчРЖ
      return item;
    });
  }
   // щБ┐хЕНхОЯцЭечЪДцЦЗф╗╢ф╕вхд▒я╝Мш┐Щца╖хнРхЖЩх░▒хПпф╗еф║Ж
  this.setState({ fileList: file.status ? [...fileList] : this.state.fileList });
};

// ф╕Кф╝аш┐Ых║жхПпф╗ещАЪш┐ЗonProgressф╕нчЪДpercentцЭецОзхИ╢ца╖х╝Пя╝МшАМф╕НцШпfile.status
handleProgress = (event, file) => {
  let {fileList} = this.state;
  fileList = fileList.map(item => {
    if (item.uid === file.uid) {
      item.percent = event.percent;
    }
    return item;
  });
  this.setState({fileList});
};

рдЗрд╕ рдЬрд╡рд╛рдм рдиреЗ рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ рд╣рд▓ рдХрд░ рджреАя╝Б

рд╕рдВрд╕реНрдХрд░рдг 3.13.0 рдореЗрдВ, рдкреИрдХреЗрдЬрд┐рдВрдЧ рдХреЗ рдмрд╛рдж onChange рдореЗрдВ this.setState ({fileList}) рдХреЛ рд╕рдВрдЪрд╛рд▓рд┐рдд рдХрд░рдиреЗ рд╕реЗ рдЕрдкрд▓реЛрдб рдЕрдиреБрд░реЛрдз рд░рджреНрдж рд╣реЛ рдЬрд╛рдПрдЧрд╛ред рдпрд╣ рд╡рд┐рдХрд╛рд╕ рдХреЗ рдорд╛рд╣реМрд▓ рдореЗрдВ рд╕рд╛рдорд╛рдиреНрдп рд╣реИ, рдФрд░ рдЗрд╕рдХрд╛ рдХрд╛рд░рдг рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред

@tsuijie 3.13.5 рддрдп рдХреА рдЧрдИ рд╣реИред

рдореИрдВ рд▓реЗрдЦрдХ рд╕реЗ рдкреВрдЫрдирд╛ рдЪрд╛рд╣реВрдВрдЧрд╛, рдореБрдЭреЗ рдлрд╛рдЗрд▓рдмрдЬ рдХреЗ рддрд╣рдд рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдирд╣реАрдВ рдорд┐рд▓ рд╕рдХрддреА рд╣реИ рдФрд░ рдлрд╛рдЗрд▓ рдЕрдкрд▓реЛрдб рд╣реЛрдиреЗ рдХреЗ рдмрд╛рдж рдмреИрдХрдПрдВрдб рджреНрд╡рд╛рд░рд╛ рд╡рд╛рдкрд╕ рдЖ рдЬрд╛рдПрдЧреАред рдореЗрд░реА рд╡рд╣реА рд╕реНрдерд┐рддрд┐ рд╣реИ, рд╕реНрдерд┐рддрд┐ === рдЕрдкрд▓реЛрдб рд╣реЛ рд░рд╣реА рд╣реИ

`рдЖрдпрд╛рдд рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛, {рдШрдЯрдХ} 'рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛' рд╕реЗ;
рдЖрдпрд╛рдд {рдЕрдкрд▓реЛрдб, рдЪрд┐рд╣реНрди} 'antd' рд╕реЗ;
'@ / utils / utils' рд╕реЗ {urlMapToFileList, fileListTourlMap} рдЖрдпрд╛рдд рдХрд░реЗрдВ;
'@ / рд╕реЗрд╡рд╛рдУрдВ / рдПрдкреАрдЖрдИ' рд╕реЗ {upLoadFile} рдЖрдпрд╛рдд рдХрд░реЗрдВ;

рдХреНрд▓рд╛рд╕ рдЕрдкрд▓реЛрдбрдлрд╝реЙрд░реНрдо рдХрд╛ рд╡рд┐рд╕реНрддрд╛рд░ рдШрдЯрдХ {
рд╕реНрдереИрддрд┐рдХ рдбрд┐рдлреЙрд▓реНрдЯрдкреНрд░реЙрдкреНрд╕ = {
HideCheckAll: рдЧрд▓рдд,
};

рдХрдВрд╕реНрдЯреНрд░рдХреНрдЯрд░ (рдкреНрд░реЙрдкреНрд╕) {
рд╕реБрдкрд░ (рд╕рд╣рд╛рд░рд╛);
console.log (urlMapToFileList (props.value));
this.state = {
filesList: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [],
// value: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [],
};
}

onChange = рдорд╛рди => {
const {onChange} = this.props;
рдЕрдЧрд░ (onChange) {
const selfValue = fileListTourlMap (рдореВрд▓реНрдп);
onChange (selfValue.length; selfValue: null);
}
};
рд╣реИрдВрдбрд▓рдЪреЗрдВрдЬ = (рдбреЗрдЯрд╛) => {
const {рдлрд╝рд╛рдЗрд▓} = рдбреЗрдЯрд╛;
const {fileList} = рдбреЗрдЯрд╛;
рдХрдВрд╕реЛрд▓.рд▓реЙрдЧ ('рд╣реИрдВрдбрд▓рдЪреЗрдВрдЬ', рдлрд╛рдЗрд▓.рд╕реНрдЯреИрдЯрд╕);
рдЕрдЧрд░ (file.status === 'рдХрд┐рдпрд╛') {
рдбрд┐рдмрдЧрд░
const {рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛} = рдлрд╝рд╛рдЗрд▓;
рдЕрдЧрд░ (рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдФрд░ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ред рдЕрд╕рдлрд▓) {
file.url = response.result.url;
fileList.pop ();
fileList.push (рдлрд╝рд╛рдЗрд▓);
}
}
рдЕрдЧрд░ (file.status === 'рддреНрд░реБрдЯрд┐') {
fileList.pop ();
}

if(!file.status) {
  fileList = fileList.filter(ele => ele.url)
}
this.setState({filesList: fileList});
this.onChange(fileList);

}

рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛() {
const {filesList} = this.state;
рд╡рд╛рдкрд╕реА (

рд╕реНрд╡реАрдХрд╛рд░ = "рдЫрд╡рд┐ / *"
рд╢реАрд░реНрд╖ рд▓реЗрдЦ = {{'x-Access-Token': localStorage.getItem ('рдЯреЛрдХрди')}}
рдХрд╛рд░реНрд░рд╡рд╛рдИ = "/ API / рд╡реНрдпрд╡рд╕реНрдерд╛рдкрдХ / рдлрд╝рд╛рдЗрд▓ / рдЕрдкрд▓реЛрдб"
listType = "рдЪрд┐рддреНрд░ рдХрд╛рд░реНрдб"
FileList = {} filesList
onChange = {} this.handleChange
{... this.porps}
>
{filesList.length> = 1? рд╢реВрдиреНрдп:

ф╕Кф╝а
}


);
}
}

рдирд┐рд░реНрдпрд╛рдд рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдЕрдкрд▓реЛрдбрдлрд╝реЙрд░реНрдо;
`
цШп ф╜Ж ф╕Кф╝а ф╕Кф╝а ф╕Кф╝а цШп цШп цШп цШп цШп цШп рдЕрдкрд▓реЛрдб рдХрд░рдирд╛
@ afc163

рд╣рд╛рд▓рд╛рдБрдХрд┐ рдХреБрдЫ рд╕рд╛рд▓ рдкрд╣рд▓реЗ рдпрд╣ рдПрдХ рдкреБрд░рд╛рдиреА рд╕рдорд╕реНрдпрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЖрдЬ рдореИрдВрдиреЗ рднреА рдЧрдбреНрдвреЛрдВ рдкрд░ рдХрджрдо рд░рдЦрд╛ рдФрд░ рдЬрд┐рди рдЧрдбреНрдвреЛрдВ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд┐рдпрд╛, рдЙрдирдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХреАред рдпрджрд┐ рдЖрдк рдШрдЯрдХреЛрдВ рдХреЛ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП React.PureComponent рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдХреГрдкрдпрд╛ рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рдпрд╣ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ shouldComponentUdate рдЬреАрд╡рди рдЪрдХреНрд░ рдХреЛ рдкрд╛рд░рд┐рдд рдХрд░ рджреЗрдЧрд╛ред рдПрдХ рдЙрдерд▓реЗ рддреБрд▓рдирд╛ рдХрд░реЗрдВ, рдФрд░ рдЖрдкрдХреЗ рдлрд╛рдЗрд▓рд┐рд╕реНрдЯ рдХрд╛ рд░рд╛рдЬреНрдп рд╕рдВрджрд░реНрдн рдкрддрд╛ рдирд╣реАрдВ рдмрджрд▓рд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рдЕрдкрд▓реЛрдб рдШрдЯрдХ рдирд╣реАрдВ рдмрджрд▓реЗрдЧрд╛ред

fileList = info.fileList;
/ * рдпрд╣рд╛рдВ рдЖрдкрдХреЛ рдлрд╝рд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рд╕рдВрджрд░реНрдн рдмрджрд▓рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ * /
fileList = JSON.parse (JSON.stringify (fileList));
this.setState ({fileList: fileList});

3.16.1 рдЕрдкрд▓реЛрдб рдореЗрдВ рдЕрднреА рднреА рд╕рдорд╕реНрдпрд╛рдПрдВ рд╣реИрдВ, рдХреЗрд╡рд▓ рдПрдХ рдмрд╛рд░ рдкрд░рд┐рд╡рд░реНрддрди рд╣реЛрддрд╛ рд╣реИ, рдЗрд╕реЗ рдЕрдкрдбреЗрдЯ рдХрд░рдиреЗ рдХреА рдЕрдиреБрд╢рдВрд╕рд╛ рдХреА рдЬрд╛рддреА рд╣реИ

рдЗрд╕ рддрд░рд╣ рдХреА рдЬрд░реВрд░рдд рд╣реИред рдЗрд╕ рддрд░рд╣ рд╕реЗ ({fileList: fileList.slice ()})

3.16.2 рд░рд┐рдПрдХреНрдЯ рд╣реБрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╕рдордп, рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЛ рдЕрдкрд▓реЛрдб рдХреЗ рдСрди-рд▓рд╛рдЗрди рдореЗрдВ рдЧрд╣рд░рд╛рдИ рд╕реЗ рдХреЙрдкреА рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ, рдЖрдк рд▓реЙрд╢ _.cloneDeep (рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ) рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ

рдореЛрдмрд┐рд▓ рдХреЛ рдПрдХреАрдХреГрдд рдХрд░реЗрдВ, рдПрдХ рдореЛрдбрд▓ рдореЗрдВ рджреЛ рдЕрдкрд▓реЛрдб рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ, рдФрд░ рд╕рдВрдмрдВрдзрд┐рдд рд╕реНрдЯреЛрд░ рдореЗрдВ рджреЛ рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдХреЛ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░реЗрдВред рдЕрдкрд▓реЛрдб рдХреА рдШрдЯрдирд╛рдУрдВ рдореЗрдВ рд╕реЗ рдПрдХ рд╕рд╛рдорд╛рдиреНрдп рдЕрдкрд▓реЛрдб рдкреНрд░рдХреНрд░рд┐рдпрд╛ рд╕реЗ рдЧреБрдЬрд░рддреА рд╣реИ (рдЕрдкрд▓реЛрдбрд┐рдВрдЧ рдФрд░ рдХрд┐рдП рдЧрдП рджреЛрдиреЛрдВ рд░рд╛рдЬреНрдп рдкреНрд░рд╛рдкреНрдд рд╣реЛрддреЗ рд╣реИрдВ), рд▓реЗрдХрд┐рди рджреВрд╕рд░рд╛ рдПрдХ рдирд┐рд░рд╛рд╢рд╛рдЬрдирдХ рдерд╛ред рд╣рд░ рд╕рдордп рдХреЗрд╡рд▓ рдЕрдкрд▓реЛрдб рдХрд░рдирд╛ рдерд╛, рдФрд░ рдпрд╣ рдХреЗрд╡рд▓ рдЗрд╕ рддрд░рд╣ рд╕реЗ рд╣рд▓ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рдерд╛ред
ф┐оцФ╣хЙН: this.fileList[0] = file; ф┐оцФ╣хРО: this.fileList = []; this.fileList.push(file);
рдФрд░, рдпрджрд┐ рдпрд╣ред FileList рд╡рд┐рд░рд╛рд╕рдд рдореЗрдВ рдорд┐рд▓рд╛ рд╡рд░реНрдЧ рд╕реЗ рдЖрддрд╛ рд╣реИ, рддреЛ рд╕рдВрд╢реЛрдзрд┐рдд рддрд░реАрдХрд╛ рдХрд╛рдо рдирд╣реАрдВ рдХрд░реЗрдЧрд╛

if (status === 'error') {
    message.success(`${file.name} upload failed.`);
    const fileList = this.state.fileList.filter(file => !file.error);
    this.setState({
        fileList
    }, () => {
        console.log(this.state.fileList)
    })
}

рдореИрдВ рд╡рд┐рдлрд▓ рд╣реЛрдиреЗ рдкрд░ рдкреНрд░рджрд░реНрд╢рд┐рдд рдЖрдЗрдЯрдо рдХреЛ рд╣рдЯрд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред рд░рд╛рдЬреНрдп рдЗрд╕ рддрд░рд╣ рд╕реЗ рдХреНрдпреЛрдВ рдирд╣реАрдВ рдмрджрд▓рддрд╛ рд╣реИ?

рдХрдВрд╕реЛрд▓ред рд╕рд╣реА рд╣реИ, рд╕реНрдерд┐рддрд┐ рдЦрд╛рд▓реА рд╣реИ, рд▓реЗрдХрд┐рди рдбреЗрд╡рд▓рдкрд░ рдЯреВрд▓ рдЕрднреА рднреА рдЙрдкрд▓рдмреНрдз рд╣реИрдВ, рдФрд░ рд╡рд┐рдлрд▓ рдЕрдкрд▓реЛрдб рдЪрд┐рддреНрд░ рднреА рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд┐рдП рдЧрдП рд╣реИрдВ

https://github.com/ant-design/ant-design/issues/2423#issuecomment -491143417

this.setState({
    fileList:[...fileList]
}

рдкреНрд░рддрд┐рдмрдВрдзрд┐рдд URL рдореЗрдВ рдкрд╣рдЪрд╛рди рдлрд╝реАрд▓реНрдб рдФрд░ рдЯреЛрдХрди рдХреИрд╕реЗ рдЬреЛрдбрд╝реЗрдВ? рдЙрдиреНрд╣реЗрдВ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреНрд░рд┐рдпрд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХреИрд╕реЗ рдХрд░реЗрдВ? рдХрд╛рд░реНрд░рд╡рд╛рдИ рдХреЗрд╡рд▓ рдкрддреЗ рджреЗрддреА рд╣реИ, рдХреНрдпрд╛ рдЖрдк рдбреЗрдЯрд╛ рдирд╣реАрдВ рдЬреЛрдбрд╝ рд╕рдХрддреЗ?

рд╣реЗрдбрд░ рдореЗрдВ рд░рдЦрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ

рдЗрд╕ рдЪрд╛рд▓ рдХреЗ рд╕рд╛рде рдореЗрд░реА рд╕рдорд╕реНрдпрд╛ рд╣рд▓ рд╣реЛ рдЧрдИ рд╣реИ
Screen Shot 1398-03-25 at 6 29 26

рдореЗрд░реЗ рдкрд╛рд╕ рдбрд╛рдпрдиреЗрдорд┐рдХ рдЗрдирдкреБрдЯ рдХреНрд░рд┐рдПрд╢рди рд╕рд┐рд╕реНрдЯрдо рдерд╛, рдЗрд╕рд▓рд┐рдП рдирдП рдбрд╛рдпрдиреЗрдорд┐рдХ рдкреНрд░реЙрдкреНрд╕ рдХреЗ рд╕рд╛рде рдЖрдк рдЗрдирдкрд┐рдВрдЧ рдкреНрд░реЙрдкреНрд╕ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрддрд╛ рд╕рдХрддреЗ рд╣реИрдВ

рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рддрдп рдЬрдм рдореИрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рд╢реБрд░реВ React.Component рдХреЗ рдмрдЬрд╛рдп React.PureComponent ред

рдЬрдм рдореИрдВ modal.info рдФрд░ рдирд┐рдпрдВрддреНрд░рдг рдлрд╛рдЗрд▓рд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ onChange рдХреЛ рдХреЗрд╡рд▓ рдПрдХ рдмрд╛рд░ рдХреЙрд▓ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдЬрдм рдореИрдВ рдореЛрдбрд▓ рдирд┐рдХрд╛рд▓рддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ

рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ

1: React.Component рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ
2: рдпрд╣ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рдХреНрдпрд╛ fileList getDerivedStateFromProps рдореЗрдВ рд╕реЗрдЯ рд╣реИ рдФрд░ рдХреНрдпрд╛ рдпрд╣ рд╕рд╣реА рддрд░реАрдХреЗ рд╕реЗ рд╕реЗрдЯ рд╣реИред
3: fileList: this.state.fileList
4: onChange: ({рдлрд╝рд╛рдЗрд▓, рдлрд╝рд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ}) => {
this.setState ({FileList});
}

3.19.7 рдореЗрдВ рдЕрднреА рднреА рдпрд╣ рд╕рдорд╕реНрдпрд╛ рд╣реИ

рдореИрдВ рдЖрдкрдХреЗ рд╕рдВрджрд░реНрдн рдХреЗ рд▓рд┐рдП рдПрдХ рд╕рдлрд▓ рдорд╛рдорд▓рд╛ рдкреЛрд╕реНрдЯ рдХрд░рддрд╛ рд╣реВрдВред рдореИрдВ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рд╕реЗ рдкрд╣рд▓реЗ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ред рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛ рдЧрдгрдирд╛ рдХрд░реЗрдВ рдХрд┐ рдПрдХ рдиреЛрдЯ рдХрд░реЗрдВ, рддрд╛рдХрд┐ рдмрд╛рдж рдореЗрдВ рд╕реБрд╡рд┐рдзрд╛рдЬрдирдХ рдЦреЛрдЬ рдХреЛ рднреВрд▓ рд╕рдХреЗрдВ

env:

  • atd: 4.0.0-rc.1
  • рдкреНрд░реЛ-рд▓реЗрдЖрдЙрдЯ: 5.0.0
  • рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛: 16.9.17
import React, { useState } from 'react';
import { Modal, Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons/lib';
import { UploadProps } from 'antd/lib/upload';
import { deleteArtifact } from '@/services/artifact';

interface UploadModalType {
  visible: boolean
  onCancel: () => void
  projectId: number
}

const UploadModal: React.FC<UploadModalType> = props => {
  const { visible, onCancel, projectId } = props;
  const [fileList, setFileList] = useState();

  const uploadProps: UploadProps = {
    name: 'file',
    fileList,
    listType: 'text',
    action: 'http://localhost:8080/v1/artifacts',
    data: { project_id: projectId, type: 'application/json' },
    onChange(info) {

      setFileList(info.fileList.slice()); // Note: A new object must be used here!!!

      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onRemove(file) {
      const promise: PromiseLike<void | boolean> = deleteArtifact({ filename: file.response });
      promise.then((value: any) => {
        if (value === '' || value instanceof Response && value.status === 205) {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          setFileList(newFileList);
        }
      });
    },
  };

  return (
    <Modal
      destroyOnClose
      title='ф╕Кф╝ах╜ТцбгцЦЗф╗╢'
      visible={visible}
      onCancel={onCancel}
    >
      <Upload
        {...uploadProps}
      >
        <Button>
          <UploadOutlined/> Click to Upload
        </Button>
      </Upload>
    </Modal>
  );
};

export default UploadModal;

рдХреНрдпрд╛ рдЧрдбреНрдврд╛ рд╣реИ, рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреА рд╕реНрдерд┐рддрд┐ рдХреЛ рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рдкрд░ рд╕реЗрдЯ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП, рдЕрдиреНрдпрдерд╛, рдЗрд╕реЗ рдХреЗрд╡рд▓ рдПрдХ рдмрд╛рд░ рдирд┐рд╖реНрдкрд╛рджрд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛, рдФрд░ рд▓рдВрдмреЗ рд╕рдордп рддрдХ рдЯреЙрд╕ рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдпрд╣ рдЕрд╡рд╛рдХ рд╣реЛ рдЬрд╛рдПрдЧрд╛ред

рдореИрдВ рдЖрдкрдХреЗ рд╕рдВрджрд░реНрдн рдХреЗ рд▓рд┐рдП рдПрдХ рд╕рдлрд▓ рдорд╛рдорд▓рд╛ рдкреЛрд╕реНрдЯ рдХрд░рддрд╛ рд╣реВрдВред рдореИрдВ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рд╕реЗ рдкрд╣рд▓реЗ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ред рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛ рдЧрдгрдирд╛ рдХрд░реЗрдВ рдХрд┐ рдПрдХ рдиреЛрдЯ рдХрд░реЗрдВ, рддрд╛рдХрд┐ рдмрд╛рдж рдореЗрдВ рд╕реБрд╡рд┐рдзрд╛рдЬрдирдХ рдЦреЛрдЬ рдХреЛ рднреВрд▓ рд╕рдХреЗрдВ

env:

  • atd: 4.0.0-rc.1
  • рдкреНрд░реЛ-рд▓реЗрдЖрдЙрдЯ: 5.0.0
  • рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛: 16.9.17
import React, { useState } from 'react';
import { Modal, Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons/lib';
import { UploadProps } from 'antd/lib/upload';
import { deleteArtifact } from '@/services/artifact';

interface UploadModalType {
  visible: boolean
  onCancel: () => void
  projectId: number
}

const UploadModal: React.FC<UploadModalType> = props => {
  const { visible, onCancel, projectId } = props;
  const [fileList, setFileList] = useState();

  const uploadProps: UploadProps = {
    name: 'file',
    fileList,
    listType: 'text',
    action: 'http://localhost:8080/v1/artifacts',
    data: { project_id: projectId, type: 'application/json' },
    onChange(info) {

      setFileList(info.fileList.slice()); // Note: A new object must be used here!!!

      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
    onRemove(file) {
      const promise: PromiseLike<void | boolean> = deleteArtifact({ filename: file.response });
      promise.then((value: any) => {
        if (value === '' || value instanceof Response && value.status === 205) {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          setFileList(newFileList);
        }
      });
    },
  };

  return (
    <Modal
      destroyOnClose
      title='ф╕Кф╝ах╜ТцбгцЦЗф╗╢'
      visible={visible}
      onCancel={onCancel}
    >
      <Upload
        {...uploadProps}
      >
        <Button>
          <UploadOutlined/> Click to Upload
        </Button>
      </Upload>
    </Modal>
  );
};

export default UploadModal;

рдореБрдЭреЗ Func рдШрдЯрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдореЗрдВ рд╕рдорд╛рди рд╕рдорд╕реНрдпрд╛ рд╣реИред Info.status рдореЗрдВ рд╣рдореЗрд╢рд╛ рдЕрдкрд▓реЛрдбрд┐рдВрдЧ рд╕реНрдерд┐рддрд┐ рдФрд░ рдСрдирдХреЙрдиреНрдЧ рдХреЙрд▓ рдХреЗрд╡рд▓ рдПрдХ рдмрд╛рд░ рд╣реЛрддреА рд╣реИ

@tsuijie 3.13.5 рддрдп рдХреА рдЧрдИ рд╣реИред

3.13.5 рдореЗрд░реЗ рдкрд╛рд╕ рднреА рдпрд╣реА рд╕рдорд╕реНрдпрд╛ рд╣реИред on.hange рдореЗрдВ рдЗрд╕ .setState ({fileList}) рдХреЛ рдЪрд╛рд▓реВ рдХрд░реЗрдВ, рдЕрдкрд▓реЛрдб рдЕрдиреБрд░реЛрдз рдХреЛ рд░рджреНрдж рдХрд░ рджрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред

рдпрджрд┐ рдЖрдк рдЗрд╕рдХреЗ рдПрдХреНрд╢рди рдЗрдВрдЯрд░рдлрд╝реЗрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреА рд╕реНрдерд┐рддрд┐ рд╣реЛрдЧреА, рдЖрдкрдХреЛ рдкреНрд░рддреНрдпреЗрдХ рдлрд╝рд╛рдЗрд▓ рдХреА рд╕реНрдерд┐рддрд┐ рдХреЛ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рд╕реЗрдЯ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ

рдпрджрд┐ рдЖрдк рдЗрд╕рдХреЗ рдПрдХреНрд╢рди рдЗрдВрдЯрд░рдлрд╝реЗрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреА рд╕реНрдерд┐рддрд┐ рд╣реЛрдЧреА, рдЖрдкрдХреЛ рдкреНрд░рддреНрдпреЗрдХ рдлрд╝рд╛рдЗрд▓ рдХреА рд╕реНрдерд┐рддрд┐ рдХреЛ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рд╕реЗрдЯ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ

рдХреГрдкрдпрд╛ рдЬрд╛рдБрдЪ рд▓реЗрдВ рдХрд┐ рдЬрдм рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рд░рд╛рдЬреНрдп рдХреЛ рд╡рд╛рдкрд╕ рд▓рд┐рдЦрддрд╛ рд╣реИ рддреЛ рдирдИ рд╡рд╕реНрддреБ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, [... рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ]

рдареАрдХ рд╣реИ рдзрдиреНрдпрд╡рд╛рдж

--- рдореВрд▓ ---
рд╕реЗ: "рдЕрдореНрдореВ" < рдиреЛрдЯрд┐рдлрд┐рдХреЗрд╢рди @github.com
рджрд┐рдирд╛рдВрдХ: рд╕реВрд░реНрдп, рдЬреБрд▓рд╛рдИ реирем, реирежреиреж рез PM:режрез рдЕрдкрд░рд╛рд╣реНрди
рдХреЗ рд▓рд┐рдП: "рдЪреАрдВрдЯреА-рдбрд┐рдЬрд╛рдЗрди / рдЪреАрдВрдЯреА-рдбрд┐рдЬрд╛рдЗрди" < [email protected]>;
Cc: "рдЯрд┐рдкреНрдкрдгреА" << [email protected]>; "SCLGIS" < [email protected]>;
рд╡рд┐рд╖рдп: рдкреБрди: [рдПрдВрдЯ-рдбрд┐рдЬрд╝рд╛рдЗрди / рдПрдВрдЯ-рдбрд┐рдЬрд╝рд╛рдЗрди] рдлрд╝рд╛рдЗрд▓ рдЕрдкрд▓реЛрдб рдХрд░реЗрдВред рд╕реНрдЯреИрдЯрд╕ рдХреЛ рд╣рдореЗрд╢рд╛ рдЕрдкрд▓реЛрдб рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ (# реирекреирей)

рдпрджрд┐ рдЖрдк рдЗрд╕рдХреЗ рдПрдХреНрд╢рди рдЗрдВрдЯрд░рдлрд╝реЗрд╕ рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреЗ рдмрд╛рдж, рдЕрдкрд▓реЛрдб рдХрд░рдиреЗ рдХреА рд╕реНрдерд┐рддрд┐ рд╣реЛрдЧреА, рдЖрдкрдХреЛ рдкреНрд░рддреНрдпреЗрдХ рдлрд╝рд╛рдЗрд▓ рдХреА рд╕реНрдерд┐рддрд┐ рдХреЛ рдореИрдиреНрдпреБрдЕрд▓ рд░реВрдк рд╕реЗ рд╕реЗрдЯ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ

рдХреГрдкрдпрд╛ рдЬрд╛рдБрдЪ рд▓реЗрдВ рдХрд┐ рдЬрдм рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ рд░рд╛рдЬреНрдп рдХреЛ рд╡рд╛рдкрд╕ рд▓рд┐рдЦрддрд╛ рд╣реИ рддреЛ рдирдИ рд╡рд╕реНрддреБ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, [... рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ]

-
рдЖрдк рдЗрд╕реЗ рдкреНрд░рд╛рдкреНрдд рдХрд░ рд░рд╣реЗ рд╣реИрдВ рдХреНрдпреЛрдВрдХрд┐ рдЖрдкрдиреЗ рдЯрд┐рдкреНрдкрдгреА рдХреА рд╣реИред
рдЗрд╕ рдИрдореЗрд▓ рдХрд╛ рдЙрддреНрддрд░ рд╕реАрдзреЗ рджреЗрдВ, рдЗрд╕реЗ GitHub рдкрд░ рджреЗрдЦреЗрдВ, рдпрд╛ рд╕рджрд╕реНрдпрддрд╛ рд╕рдорд╛рдкреНрдд рдХрд░реЗрдВред

рдпрджрд┐ рдореИрдВ "рдЧреБрдгрдХ" рд╡рд┐рдХрд▓реНрдк рдХреЗ рд╕рд╛рде рд╣реБрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ рддреЛ рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред
рдпрджрд┐ рдореИрдВ 3 рдлрд╝рд╛рдЗрд▓реЛрдВ рдХрд╛ рдЪрдпрди рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдореБрдЭреЗ рд╕реВрдЪреА рдореЗрдВ 2 рдорд┐рд▓рддреЗ рд╣реИрдВред рдпрджрд┐ рдореИрдВ 5 рдлрд╝рд╛рдЗрд▓реЛрдВ рдХрд╛ рдЪрдпрди рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдореБрдЭреЗ рдХреЗрд╡рд▓ 3 рдорд┐рд▓рддреЗ рд╣реИрдВ, рдХрднреА-рдХрднреА 4. рдпрджрд┐ рдореИрдВ "рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ" рдХреЛ рд╣рдЯрд╛ рджреЗрддрд╛ рд╣реВрдВ, рддреЛ рдпрд╣ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдФрд░ рдореИрдВ рд╕реВрдЪреА рдХреА рд╕рднреА рдлрд╛рдЗрд▓реЛрдВ рдХреЛ рджреЗрдЦ рд╕рдХрддрд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдореИрдВ рдЙрдиреНрд╣реЗрдВ рдирд┐рдпрдВрддреНрд░рд┐рдд рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ - рдореБрдЭреЗ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ "рдлрд╛рдЗрд▓рд▓рд┐рд╕реНрдЯ" рдкреНрд░реЛрдкред
рдЕрдЧрд░ рдореИрдВ рд╣реБрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдореИрдВ рдПрдХ рдЕрд▓рдЧ рд╡реНрдпрд╡рд╣рд╛рд░ рдХрд░рддрд╛ рд╣реВрдВ, рдХреНрдпреЛрдВрдХрд┐ рдореИрдВ рд╣реБрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВред

рдореБрдЭреЗ 4.5.1 рдкрд░ рднреА рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рдирд╛ рдкрдбрд╝рд╛, рдФрд░ рдпрд╣ рд╣рдореЗрд╢рд╛ рдЕрдкрд▓реЛрдб рдХрд░рддрд╛ рд░рд╣рд╛ рд╣реИредрдореИрдВрдиреЗ рдкрд╣рд▓реЗ рдмрдбрд╝реЗ рд▓реЛрдЧреЛрдВ рджреНрд╡рд╛рд░рд╛ рдмрддрд╛рдП рдЧрдП рддрд░реАрдХреЛрдВ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА, рд▓реЗрдХрд┐рди рд╡реЗ рдмреЗрдХрд╛рд░ рдереЗред рдЖрдЦрд┐рд░рдХрд╛рд░, рдореИрдВрдиреЗ рд╕реНрд░реЛрдд рдХреЛрдб рдХреЛ рджреЗрдЦрд╛ рдФрд░ рдкрд╛рдпрд╛ рдХрд┐ рдРрд╕рд╛ рдЗрд╕рд▓рд┐рдП рдерд╛ рдХреНрдпреЛрдВрдХрд┐ рдЬрдм рдореИрдВ рдкреНрд░рддрд┐рдкрд╛рджрди рдХрд░ рд░рд╣рд╛ рдерд╛, рддреЛ рдЕрдкрд▓реЛрдб рдШрдЯрдХ рдХрд╛ рдореБрдЦреНрдп рдореВрд▓реНрдп рд╣рд░ рдмрд╛рд░ рдЕрд▓рдЧ рдерд╛, рдЬрд┐рд╕рдХреЗ рдХрд╛рд░рдг рдкреБрди: рдкреНрд░рддрд┐рдкрд╛рджрди рдХрд┐рдпрд╛ рдЧрдпрд╛ред рд╕реНрд░реЛрдд рдиреЗ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рд░реВрдк рд╕реЗ рдкрд┐рдЫрд▓реЗ рдЕрдкрд▓реЛрдб рдЕрдиреБрд░реЛрдз рдХреЛ рд░рджреНрдж рдХрд░ рджрд┐рдпрд╛, рдЬрд┐рд╕рдХреЗ рдкрд░рд┐рдгрд╛рдорд╕реНрд╡рд░реВрдк рд▓рдЧрд╛рддрд╛рд░ред рдпрд╣ рдЙрддреНрдерд╛рди рдХреА рд╕реНрдерд┐рддрд┐ рд╣реИ, рдХреБрдВрдЬреА рдореВрд▓реНрдп рддрдп рд╣реЛ рдЧрдпрд╛ рд╣реИ рдФрд░ рдлрд┐рд░ рдЗрд╕реЗ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЕрдкрд▓реЛрдб рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИред

@tsuijie 3.13.5 рддрдп рдХреА рдЧрдИ рд╣реИред

3.13.5 рдореЗрд░реЗ рдкрд╛рд╕ рднреА рдпрд╣реА рд╕рдорд╕реНрдпрд╛ рд╣реИред on.hange рдореЗрдВ рдЗрд╕ .setState ({fileList}) рдХреЛ рдЪрд╛рд▓реВ рдХрд░реЗрдВ, рдЕрдкрд▓реЛрдб рдЕрдиреБрд░реЛрдз рдХреЛ рд░рджреНрдж рдХрд░ рджрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

kevyu picture kevyu  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

xtznhzxdev picture xtznhzxdev  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

plandem picture plandem  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

longzb picture longzb  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

alanwei0 picture alanwei0  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ