Ant-design: Upload file.status wird immer hochgeladen

Bei meiner tatsächlichen Messung gibt es kein Problem. Ist es zweckmäßig, den gesamten fraglichen Code für eine einfache Reproduktion anzugeben?

Umadressieren:
http://codepen.io/xiongying/pen/jAGRvx?editors=0011

Für den kontrollierten Modus sollten Sie immer fileList in onChange um sicherzustellen, dass alle Zustände mit Upload synchronisiert sind. Ähnlich dem Wortlaut hier: http://ant.design/components/upload/#components -upload-demo-fileList

// 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} />

Es wird empfohlen, das Konzept der gesteuerten Komponenten zu untersuchen: https://facebook.github.io/react/docs/forms.html#controlled -components

Beachten Sie, dass Sie fileList klonen müssen, um sicherzustellen, dass Upload Änderungen im Array erkennen kann.

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

e0a986ed71cd87e506fb8e4ee5e2e0130fc70ae1

Warum kann ich immer nicht hochladen, wenn ich das Upload-Steuerelement verwende, und immer einen Fehler melden: POST http: // localhost : 8081 / api / nes / 2 / uploadMusic / r_ty 404 (Nicht gefunden)

Wie füge ich Identitätsfelder und Token zu eingeschränkten URLs hinzu? Wie verwende ich Aktionen, um sie zu übertragen? Aktion gibt nur Adressen an. Können Sie keine Daten hinzufügen?

Es gibt immer noch ein Problem in React.PureComponent, da React.PureComponent eine Ebene von Optimierungsentscheidungen getroffen hat, die Dateiliste Verweise zwischengespeichert hat und nicht aktualisiert wird, wenn es sich um dasselbe Objekt handelt, und ein neues Objekt sofort in React.PureComponent generiert werden sollte
handleChange = ({fileList}) => {
// Fehler behoben
this.setState ({fileList: fileList.slice ()});
}}

@ afc163

@yongningfu Danke für den Tipp, es wurde aktualisiert.

Besondere Erinnerung: Wenn Sie im kontrollierten Modus React shouldComponentUpdate für einen flachen Vergleich verwenden, wird der Status auch dann nicht aktualisiert, wenn er mit Upload synchronisiert ist. Der Grund ist, dass die Referenz kongruent ist ===, was das Rendern verhindert

Laden Sie mehrere Bilder hoch, bevor Upload das Limit für das Hochladen von Bildparametern festlegt. OnChange erhält eine Liste der Bilder, die erfolgreich hochgeladen wurden. Nach dem erfolgreichen Hochladen einiger Bilder werden durch das Hochladen eines falschen Bilds alle Bilder gelöscht, die zuvor erfolgreich hochgeladen wurden. Gibt es eine Lösung? ?

Wenn Sie zurückrufen, sollten Sie den Status zurücksetzen, z. B. this.setState ({fileList});

handleChange = (info) => {
console.log (info);

    //把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});
}

Solange sich onChange im Status ändert, wird Upload immer intern aufgerufen, oder?

Dieses Problem ist seit langem aufgetreten und hat sich als setState herausgestellt. Komponenten sollten nicht so ausgelegt sein, warum sollte man sich auf den faulen externen Zustand verlassen?

Ich möchte nur den base64-Code und interagiere nicht mit dem Hintergrund. Wie kann das Problem des automatischen Sendens von Anforderungen an den Hintergrund gelöst werden?

Ist es eine Sandskulptur, um diese Komponente zu erhalten?

Was kann ich tun, wenn der Upload fehlschlägt und ich das vorherige Standardbild anzeigen möchte?

Der Upload ist fehlgeschlagen. Rufen Sie in der Fehlerverarbeitungsfunktion auf
this.setState ({
fileList: intial_list
})
Kann das vorherige Standardbild anzeigen

Ich denke, es kann ein Problem mit dem Zeitpunkt der Rückrufausführung geben, wenn der Upload der Komponente abgeschlossen ist. Betrachten Sie diese Situation:

Pseudo-Code für Komponentenbeziehungen:

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

Die übergeordnete Komponente Controller wird benachrichtigt, um den Status über onUpload zu aktualisieren.

Da die Statusaktualisierung von React jedoch asynchron ist, ist die Ausführungsreihenfolge, wenn der Bild-Upload schnell genug ist
constroller.onUpload(会调用 controller.setState) -> upload.onSuccess -> upload.componentWillReceiveProps
Bei der Ausführung von upload.onSuccess befindet sich im Upload-Status keine entsprechende hochgeladene Datei. Weil das Update des Uploads state.fileList von componentWillReceiveProps abhängt.

Daher halte ich den stromgesteuerten Modus dieser Komponente für unzuverlässig.

Mögliche Lösungen:

1. Im kontrollierten Modus führen die tatsächliche Verarbeitungslogik onSuccess und andere Ereignisse componentDidUpdate durch
2. Vermeiden Sie state.fileList ist vollständig abhängig von props.fileList , behält eine relativ unabhängige Dateiliste (und nicht den Status der Komponenteninstanz instance.state) auf einer Komponenteninstanzinstanz bei und erleichtert das Hochladen von Ereignissen

let {file, fileList} = info;
if (file.size / 1024/1024> 10) {
Rückkehr
}}
console.log (file.status)
if (file.status! = "done") {
fileList = []
}}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ('upload')
))
当 我 添加

let {file, fileList} = info;
if (file.size / 1024/1024> 10) {
Rückkehr
}}
console.log (file.status)
if (file.status! = "done") {
fileList = []
}}
this.setState ({
fileList,
}, console.log (
this.state.fileList,
this.props.form.getFieldValue ('upload')
))
Wenn ich hinzufüge
if (file.status! = "done") {
fileList = []
}}
Überwachen Sie onchange einmal, entfernen Sie es einfach. Warum ist das so?

Dieses Problem ist nicht gelöst, richtig

Das Aufrufen von setState während des Lebenszyklus der Komponente WillReceiveProps zur Anzeige des Bildes ändert sich nicht

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

Wenn die @ afc163- Upload-Komponente mehrere Dateien hochlädt, was passiert, wenn nur eine Datei erfolgreich hochgeladen werden kann? Sehen Sie sich das Protokoll aus dem Protokoll an. Der Status in der info.fileList wird hochgeladen, der Prozentsatz und die Antwort sind beide undefiniert, aber die http-Anforderung ist 200, bitte helfen Sie

@PTGuan Natürlich wird diese Komponente einzeln empfangen. Sie müssen den Upload im Rückruf rekursiv aufrufen, nachdem der Upload erfolgreich war, um ihn stapelweise hochzuladen. Ich hoffe, Ihre Frage zu beenden.

Dieses Problem ist nicht gelöst +1

In Antd 3.8+ gibt es immer noch nur Status = 'Laden' und keinen Status "Fertig". Wie kann man das lösen?

Gibt es eine offizielle Lösung für das ständige Hochladen, aber onSuccess kann auf die richtige http200-Antwort warten

Das Problem wurde gelöst, this.setState ({fileList: [... fileList]}); Dieser Satz ist sehr wichtig. Bitte konzentrieren Sie sich darauf, wenn Sie Probleme haben

@EnixCoda , ich bin anscheinend auf das von Ihnen beschriebene Problem gestoßen, und gelegentlich wird beim Hochladen immer "Hochladen" angezeigt.

@withzhaoyu Nun, tatsächlich stoßen die meisten Leute hier auf dieses Problem. Diese Komponente ist nicht sehr zuverlässig, um den Upload-Fortschritt über den Reaktionsstatus zu speichern.

Wie man es löst! ! ! ! ! ! ! ! ! ! Wurde hochgeladen

Begegnung +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});
};

Was tun, solange Sie die base64 der Datei lesen, ohne mit dem Hintergrund zu interagieren?

@ 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 , Sie können eine andere Komponente basierend auf dieser Komponente selbst kapseln, was sonst in Bezug auf die Funktion nicht erfüllt werden kann

Fragen Sie hier schwach, ob die neu hochgeladene Datei absichtlich keine URL enthält.

Urkomisch. Jetzt wird der Status in der Dateiliste immer noch hochgeladen, auch wenn er kontrolliert wird. Ich habe den Status immer noch auf Hochladen gesetzt.Das Problem ist überhaupt nicht gelöst

Darf ich fragen, ob das Flag zum Fehler beim Hochladen von Dateien vom Backend zurückgegeben wird -> file.response.status, die Komponente wird zu diesem Zeitpunkt nicht abgefangen, und wenn ich fertig bin, wurde die Dateiliste angezeigt. Ich möchte die Dateiliste über das vom Backend zurückgegebene Flag löschen Wie es geht?

// Ich trat auf die Grube und schaute auf den Quellcode und stellte fest, dass die von mir verwendeten Probleme wie folgt sind
// 1.Zeichen der Variablen benennen
// Schlecht

/*
这里为了方便 使用了与后端返回同样的字段 导致出了问题 这里必须用fileList，不然源码中 this.state.fileList获取是空 就会导致在onSuccess中匹配失败，从而不会在触发第二次onChange事件
*/
state = {imgList:[]} 
<Upload fileList={this.state.imgList} onChange={this.onFileChange} />

// Waren

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

// 2. Der Parameter von onFileChange ist ein obj (einschließlich zweier Attribute von file und fileList) und this.setState ({fileList: [... fileList]}) muss in der Funktion onFileChange aufgerufen werden

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

Englisch zufällig? Ich habe dieses Problem zu.

@developdeez was ist dein Problem? Welche Version von Ant Design verwenden Sie?
Ich habe zuvor AntD 3.0 verwendet und einige Monate an dieser Upload-Komponente gearbeitet. Alles lief gut für mich. Ich hatte keine Probleme mehr. Am Anfang hatte ich ein Problem, aber ich habe schließlich alle behoben. Ich bin also zuversichtlich genug, alle gängigen Probleme zu lösen.

@Swordguard , Ant 3.9.3

Das Problem besteht im Grunde darin, dass die Dateiliste der Benutzeroberfläche nicht gesteuert werden kann. Ich lade und Bild hoch und habe versucht, es mit einem Knopf zu löschen und kein Glück.

Ich habe auch hier ein Ticket mit einem Beispielcode erstellt: https://github.com/ant-design/ant-design/issues/12722#event -1913716771

Konnten Sie das tun?

Im Fall von Pit +1 habe ich erfolglos versucht, this.setState({ fileList: [...fileList] }) . PureComponent wechselt zu Component, und der Status stoppt nur beim Hochladen, es sei denn, die Dateiliste wird nicht in die Requisiten aufgenommen.

Im Fall von Pit +1 habe ich erfolglos versucht, this.setState({ fileList: [...fileList] }) . PureComponent wechselt zu Component, und der Status stoppt nur beim Hochladen, es sei denn, die Dateiliste wird nicht in die Requisiten aufgenommen.

Sie können versuchen, fileList als Zeichenfolge zu definieren ~~ == ~~
// immer setState
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}
/>

Dieses Problem wurde nicht gelöst. Das Dateiobjekt enthält kein originFileObj-Attribut. Wird dieses Attribut erst nach dem Hochladen angezeigt? Jetzt ist jedoch nicht geplant, in den Hintergrund hochzuladen und den base64-Inhalt direkt abzurufen.

this.setState({ fileList: [...fileList] }); Dies kann zwar das vom Client angezeigte Problem lösen

Nach Bedarf gibt der Hintergrund nach dem Hochladen der Datei eine Datei-ID zurück. Wenn ich auf "Senden" klicke, muss ich die ID zurückgeben, aber der Status wird immer hochgeladen, und ich kann die Antwort nicht von der Hintergrundoberfläche erhalten.
@ afc163

Gleiches Problem hier. In der Komponente Upload der Rückruf in der Eigenschaft action aufgerufen, aber das Argument UploadFile enthält ein leeres originFileObj dh undefined . Gibt es einen Hinweis darauf, wie der Dateiinhalt mit der Komponente Upload ant gelesen werden kann, ohne die Datei in das Backend hochzuladen?

Gleiches Problem hier. In der Komponente Upload der Rückruf in der Eigenschaft action aufgerufen, aber das Argument UploadFile enthält ein leeres originFileObj dh undefined . Gibt es einen Hinweis darauf, wie der Dateiinhalt mit der Komponente Upload ant gelesen werden kann, ohne die Datei in das Backend hochzuladen?

Eigentlich brauchen Sie originFileObj nicht, verwenden Sie einfach das Dateiobjekt. Ich denke, sie haben originFileObj entfernt

Ich bin hier, weil ich sicherstellen wollte, dass ich keine Dateien zu meiner Liste hinzugefügt habe, die beim Hochladen nicht erfolgreich waren. Mit anderen Worten, wenn mein file.status === "error" ich diese Datei nicht in der Benutzeroberfläche anzeigen möchte (möchte diese fehlerhafte Datei sicherlich nicht in der Anfrage senden). Ich habe versucht, dies zu kontrollieren, indem ich mit meiner eigenen kontrollierten Komponente gearbeitet und fileList . Ich bin auf das besagte Problem des Dateistatus gestoßen, das sich nie vom "Hochladen" geändert hat.

Daher habe ich aufgrund dieses Problems wieder keine kontrollierte Komponente verwendet. Ich konnte die gewünschte Anfrage erhalten, indem ich sicherstellte, dass normFile nur Dateien hinzufügt, die kein "Fehler" sind.

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>
    );

Auch hier hoffe ich aufrichtig, dass das Antd-Team meinen Vorschlag berücksichtigen kann (zuvor hier geschrieben ):

Behalten Sie den Status des Hochladens von Dateien Upload Instanz

Hinter mir werden die vom Hintergrund zurückgegebenen Daten separat auf der Seite gerendert. Upload speichert immer die zuletzt hochgeladenen Daten

@yoonwaiyan
`handleChange = (info) => {
let fileList = info.fileList;
this.setState ({fileList: fileList.slice ()});
if (info.file.status === 'done') {
message.success (info.file.name + "Erfolg beim Hochladen");
fileList = fileList.slice (-1);
fileList = fileList.map ((Datei) => {
if (file.response) {
file.url = file.response. # Überprüfen Sie Ihre Antwort und wählen Sie Ihre eigene URL vom Server zurück. #;
}}
Datei zurückgeben;
});

  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");
}

} `

Versuche dies.

Ich bin auch auf dieses Problem gestoßen. Nach einer Testwelle hatte ich das Gefühl, dass das Problem gefunden wurde. Erklären Sie:

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

Die Testsituation umfasst: Wenn Sie this.setState({fileList}) direkt in handleChange ausführen, wird es normal ausgeführt.

Mein vorheriges Schreiben ist ähnlich: Nach dem Filtern führt es zur ersten Ausführung, wobei die Dateiliste in ein leeres Array gefiltert wird. Daher gibt es immer nur einen Upload-Status.
Ich denke, das Problem ist, dass nach dem Hochladen, wenn Sie die Dateiliste manuell auf ein leeres Array setzen, dies die fortgesetzte Ausführung des onChange-Ereignisses beeinflusst. Nach geringfügigen Änderungen der Filterbedingungen ist das aufgetretene Problem tatsächlich behoben.

Gibt es eine verbindliche Beziehung zwischen diesen beiden Eigenschaften unter offizieller Wartung? @Imxiongying

Darüber hinaus gibt es im offiziellen Fall einen solchen Fall mit Filterung (Upload-Liste mit vollständiger Kontrolle). Ich frage mich, ob es ein Problem mit meinem Netzwerk gibt. Dieser Fall hat auch diese Situation.

Ich bin auch auf dieses Problem gestoßen. Nach einer Testwelle hatte ich das Gefühl, dass das Problem gefunden wurde. Erklären Sie:

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

Die Testsituation umfasst: Wenn Sie this.setState({fileList}) direkt in handleChange ausführen, wird es normal ausgeführt.

Mein vorheriges Schreiben ist ähnlich: Nach dem Filtern führt es zur ersten Ausführung, wobei die Dateiliste in ein leeres Array gefiltert wird. Daher gibt es immer nur einen Upload-Status.
Ich denke, das Problem ist, dass nach dem Hochladen, wenn Sie die Dateiliste manuell auf ein leeres Array setzen, dies die fortgesetzte Ausführung des onChange-Ereignisses beeinflusst. Nach geringfügigen Änderungen der Filterbedingungen ist das aufgetretene Problem tatsächlich behoben.

Gibt es eine verbindliche Beziehung zwischen diesen beiden Eigenschaften unter offizieller Wartung? @Imxiongying

Darüber hinaus gibt es im offiziellen Fall einen solchen Fall mit Filterung (Upload-Liste mit vollständiger Kontrolle). Ich frage mich, ob es ein Problem mit meinem Netzwerk gibt. Dieser Fall hat auch diese Situation.

Setzen Sie unter kontrollierten Umständen die Dateiliste im onChange-Rückruf auf leer, und die Dateiliste in der Upload-Komponente wird auf ein leeres Array aktualisiert. In ihrem internen onSuccess, onProgress und einer anderen Logik wird die Datei, die das Ereignis ausgelöst hat, aus der Dateiliste gefunden. OnChange-Rückruf auslösen

@luruozhou Uhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh , es ist so

@yidianier handleProgress Wo heißt diese Funktion?

@yidianier handleProgress Wo heißt diese Funktion?

onProgress = {this.handleProgress}

Kontrollierte Komponenten und rein extern abhängige Komponenten werden in ihren jeweiligen Szenarien verwendet. Kontrollierte Komponenten werden in ant logisch gesteuert, z. B. durch Klicken auf das Leerzeichen, um das Dropdown-Feld abzubrechen usw. Wenn diese alle extern gesteuert werden, fühlen Sie sich besonders Das Problem ist, dass die gesteuerte Komponente Teil der Grundlogik ist und kein Problem beim Komponentendesign darstellt. Beschweren Sie sich also nicht. . .

@alle

@ afc163

@yidianier handleProgress Wo heißt diese Funktion?

onProgress = {this.handleProgress}

Vielen Dank

Dieses Problem tritt auch in 3.13.1 @ afc163 auf

@ xiaolong1024 https://github.com/ant-design/ant-design/pull/14780

@ xiaolong1024 # 14780

Dieses Problem tritt immer noch auf. Bezieht es sich auf die RC-Form?

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});
};

Diese Antwort hat mein Problem gelöst！

Wenn Sie in Version 3.13.0 this.setState ({fileList}) in onChange nach dem Packen ausführen, wird die Upload-Anforderung abgebrochen. Dies ist in der Entwicklungsumgebung normal und der Grund kann nicht ermittelt werden.

@tsuijie 3.13.5 wurde behoben.

Ich möchte den Autor fragen, dass ich die Antwort unter fileOBJ und die vom Backend zurückgegebene Datei-ID nicht erhalten kann, nachdem ich sie hochgeladen habe. Ich habe die gleiche Situation, Status === Upload

`React importieren, {Component} von 'react';
{Upload, Icon} aus 'antd' importieren;
{urlMapToFileList, fileListTourlMap} aus '@ / utils / utils' importieren;
{upLoadFile} aus '@ / services / api' importieren;

Klasse UploadForm erweitert Component {
statische defaultProps = {
hideCheckAll: false,
};

Konstruktor (Requisiten) {
super (Requisiten);
console.log (urlMapToFileList (props.value));
this.state = {
filesList: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [],
// Wert: urlMapToFileList (props.value) || urlMapToFileList (props.defaultValue) || [],
};
}}

onChange = value => {
const {onChange} = this.props;
if (onChange) {
const selfValue = fileListTourlMap (Wert);
onChange (selfValue.length? selfValue: null);
}}
};
handleChange = (Daten) => {
const {file} = data;
const {fileList} = data;
console.log ('handleChange', file.status);
if (file.status === 'done') {
Debugger
const {response} = file;
if (response && response.success) {
file.url = response.result.url;
fileList.pop ();
fileList.push (Datei);
}}
}}
if (file.status === 'error') {
fileList.pop ();
}}

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

}}

render () {
const {filesList} = this.state;
Rückkehr (

accept = "image / *"
headers = {{'x-Access-Token': localStorage.getItem ('token')}}
action = "/ api / admin / file / upload"
listType = "Bildkarte"
fileList = {filesList}
onChange = {this.handleChange}
{... this.porps}
>
{filesList.length> = 1? Null:

Standard-UploadForm exportieren;
`
为 控制 上传 数量 ， 但 上传 状态 状态 为 hochladen 是 啥 啥？
@ afc163

Es ist zwar ein altes Problem vor ein paar Jahren, aber heute bin ich auch auf die Gruben getreten und habe über die Gruben gesprochen, auf die ich gestoßen bin. Wenn Sie React.PureComponent zum Erstellen von Komponenten verwenden, beachten Sie bitte, dass es den Lebenszyklus shouldComponentUpdate standardmäßig bestehen wird. Führen Sie einen flachen Vergleich durch, und die Statusreferenzadresse Ihrer Dateiliste hat sich nicht geändert, sodass sich die Upload-Komponente nicht ändert.

let fileList = info.fileList;
/ * Hier müssen Sie die Dateilistenreferenz ändern * /
fileList = JSON.parse (JSON.stringify (fileList));
this.setState ({fileList: fileList});

3.16.1 Das Hochladen hat immer noch Probleme und Änderungen werden nur einmal durchgeführt. Es wird empfohlen, sie zu aktualisieren

Benötigen Sie this.setState ({fileList: fileList.slice ()}) auf diese Weise

3.16.2 Wenn Sie React Hook verwenden, muss fileList tief in onChange of Upload kopiert werden. Sie können lodash _.cloneDeep (fileList) verwenden.

Integrieren Sie mobx, verwenden Sie zwei Upload-Komponenten in einem Modal und definieren Sie zwei Dateilisten im entsprechenden Speicher. Eines der onChange-Ereignisse von Upload durchläuft den normalen Upload-Prozess (sowohl Upload- als auch Fertigzustände werden empfangen). Aber der andere ist ziemlich enttäuscht. Es wurde immer nur hochgeladen und kann schließlich nur auf diese Weise gelöst werden.
修改前: this.fileList[0] = file; 修改后: this.fileList = []; this.fileList.push(file);
Und wenn this.fileList von einer geerbten Klasse stammt, funktioniert die geänderte Methode nicht

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)
    })
}

Ich möchte das fehlgeschlagene Anzeigeelement entfernen, wenn es fehlschlägt. Warum ändert sich der Status nicht auf diese Weise?

Das console.log ist korrekt, der Status ist leer, aber die Entwicklertools sind weiterhin verfügbar, und die fehlgeschlagenen Upload-Bilder werden ebenfalls angezeigt

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

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

Wie füge ich Identitätsfelder und Token zu eingeschränkten URLs hinzu? Wie verwende ich Aktionen, um sie zu übertragen? Aktion gibt nur Adressen an. Können Sie keine Daten hinzufügen?

Kann in die Kopfzeile eingefügt werden

ist mein problem mit diesem trick gelöst

Ich hatte ein dynamisches System zur Erstellung von Eingaben, sodass Sie mit neuen dynamischen Requisiten Antd über eingehende Requisiten informieren können

Es wurde für mich behoben, als ich anfing, React.Component anstelle von React.PureComponent .

Wenn ich modal.info verwende und die Dateiliste steuere, wird onChange nur einmal aufgerufen. Aber wenn ich Modal entferne, funktioniert es

können

1: Verwenden Sie React.Component
2: Überprüfen Sie, ob fileList in getDerivedStateFromProps festgelegt ist und ob es richtig festgelegt ist.
3: fileList: this.state.fileList
4: onChange: ({file, fileList}) => {
this.setState ({fileList});
}}

3.19.7 hat immer noch dieses Problem

Ich poste einen erfolgreichen Fall als Referenz. Ich hatte dieses Problem jedoch schon einmal. Berechnen Sie auch hier eine Notiz, um sich später die bequeme Suche vergessen zu lassen

env:

• antd: 4.0.0-rc.1
• Pro-Layout: 5.0.0
• reagieren: 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;

Was für eine Grube, der Upload-Status muss auf fileList gesetzt werden, andernfalls wird er nur einmal ausgeführt und nach einer langen Zeit des Werfens ist er sprachlos.

Ich poste einen erfolgreichen Fall als Referenz. Ich hatte dieses Problem jedoch schon einmal. Berechnen Sie auch hier eine Notiz, um sich später die bequeme Suche vergessen zu lassen

env:

• antd: 4.0.0-rc.1
• Pro-Layout: 5.0.0
• reagieren: 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;

Ich habe das gleiche Problem mit der Func-Komponente. Info.status hat immer nur einen Upload-Status und onChange-Aufrufe

@tsuijie 3.13.5 wurde behoben.

3.13.5 Ich habe auch das gleiche Problem. Die Operation this.setState ({fileList}) in onChange führt dazu, dass die Upload-Anforderung abgebrochen wird

Wenn Sie die Aktionsoberfläche nicht verwenden, wird nach dem Hochladen ein Upload-Status angezeigt. Sie müssen den Status jeder Datei manuell auf "Fertig" setzen

Wenn Sie die Aktionsoberfläche nicht verwenden, wird nach dem Hochladen ein Upload-Status angezeigt. Sie müssen den Status jeder Datei manuell auf "Fertig" setzen

Bitte überprüfen Sie, ob das neue Objekt verwendet wird, wenn die Dateiliste den Status [... Dateiliste] zurückschreibt.

Okay, danke

---Original---
Von: "Amumu" < [email protected]>
Datum: So, 26. Juli 2020, 17:59 Uhr
An: "ant-design / ant-design" < [email protected]>;
Cc: "Kommentar" < [email protected]>; "SCLGIS" < [email protected]>;
Betreff: Re: [ant-design / ant-design] Datei hochladen.status wird immer hochgeladen (# 2423)

Wenn Sie die Aktionsoberfläche nicht verwenden, wird nach dem Hochladen ein Upload-Status angezeigt. Sie müssen den Status jeder Datei manuell auf "Fertig" setzen

Bitte überprüfen Sie, ob das neue Objekt verwendet wird, wenn die Dateiliste den Status [... Dateiliste] zurückschreibt.

- -
Sie erhalten dies, weil Sie kommentiert haben.
Antworten Sie direkt auf diese E-Mail, zeigen Sie sie auf GitHub an oder melden Sie sich ab.

Es funktioniert nicht, wenn ich Hooks mit aktivierten "Multiples" -Optionen verwende.
Wenn ich 3 Dateien auswähle, werden 2 auf der Liste angezeigt. Wenn ich 5 Dateien auswähle, erhalte ich nur 3, manchmal 4. Wenn ich die Requisite "fileList" entferne, funktioniert es einwandfrei und ich kann alle Dateien in der Liste sehen, aber ich kann sie nicht steuern - ich muss verwenden die "fileList" Requisite.
Ich habe ein anderes Verhalten, wenn ich eine Klassenkomponente anstelle des Hooks useState verwende.

Ich bin auch auf dieses Problem in 4.5.1 gestoßen, und es wurde immer hochgeladen.Ich habe die von den großen Jungs zuvor erwähnten Methoden ausprobiert, aber sie haben nicht funktioniert. Schließlich habe ich mir den Quellcode angesehen und festgestellt, dass der Schlüsselwert der Upload-Komponente beim Rendern jedes Mal anders war, was zu einem erneuten Rendern führte. Der Quellcode hat die vorherige Upload-Anforderung standardmäßig abgebrochen, was zu einer Konstanten führte Es ist der Zustand des Uplodierens, der Schlüsselwert ist festgelegt und kann dann erfolgreich hochgeladen werden.

@tsuijie 3.13.5 wurde behoben.

3.13.5 Ich habe auch das gleiche Problem. Die Operation this.setState ({fileList}) in onChange führt dazu, dass die Upload-Anforderung abgebrochen wird