React setState не может назначить fileList, вместо этого назначает строку первого имени файла

Для начала я делаю простое приложение для социальных сетей. Я пытаюсь отправить форму с текстом, изображениями и видео. Мой интерфейс, где отправляется форма, сделан с помощью React, а сервер работает с node.js, смонтированным на nginx. Я пытался добавить введенные файлы в FormData с кодом ниже:

handleSubmit = function (e) {
    e.preventDefault();
    const formData = new FormData();
    formData.append("textBody", this.state.textBody)
    for (let i = 0; i < this.state.imgInput.length; i++) {
        formData.append("imgInput", this.state.imgInput.files[i], "img"+i.toString())
    fetch("mywebsite.com/api/submitArticle", {
        body: formData,
        method: "POST",
        credentials: 'include',
    }).then((response) => console.log(response))
    return false;
}.bind(this)

handleChange = function (e) {
    e.preventDefault();
    if (e.target.name === 'imgInput') {
        this.setState({
            imgInput: e.target.files,
            showSpan: false
        })
    }
}.bind(this)

<form onSubmit={this.handleSubmit}>
        <textarea id='textBody' name='textBody' onFocus={removeSpan} onBlur={checkSpanOn} onChange={this.handleChange}/>
        <input type="file" id="imgInput" name="imgInput" accept="image/*" ref={this.imgRef}  multiple={true} onChange={this.handleChange}/>
        <input type="submit" id="submitButton" name="submitButton" formEncType="multipart/form-data" />
</form>

Но React выдал мне эту ошибку при отправке формы:

TypeError: Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.

в "formData.append("imgInput", this.state.imgInput.files[i], "img"+i.toString())".

Поэтому, когда я записал в консоль, какие файлы e.target.files перед setState в handleChange, я получил обычный FileList со всеми перечисленными файлами изображений. Но когда я вывел в консоль this.state.imgInput после setState в handleChange, я получил String of C://fakepath/filename, а не fileList. (Первоначально state.imgInput был нулевым. Когда я увидел другие примеры и коды, e.target.files был fileList, поэтому я озадачен в другом месте, я сделал ошибку.

Я потратил полдня на эту проблему, и я за 5 секунд до обморока, так что любые советы будут оценены :) Спасибо за чтение.


reactjs forms setstate html submit
person Jae Hyeok Kim    schedule 12.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

да, это происходит, потому что событие исчезло, вам нужно сохранить event.target в переменной + файлы будут в imgInput, а не imgInput.files, так что вот оно:

   handleSubmit = e => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("textBody", this.state.textBody);
    for (let i = 0; i < this.state.imgInput.length; i++) {
      formData.append("imgInput", this.state.imgInput[i], "img" + i.toString());
       fetch("mywebsite.com/api/submitArticle", {
         body: formData,
         method: "POST",
         credentials: "include"
       }).then(response => console.log(response));
    }
  };

  handleChange = e => {
    e.preventDefault();
    const target = e.target;
    if (target.name === "imgInput") {
      this.setState(current => ({
        ...current,
        imgInput: target.files,
        showSpan: false
      }));
    }
  };
person adel    schedule 12.06.2020
comment
спасибо за ваш ответ, но он по-прежнему показывает ту же ошибку...: Не удалось выполнить «добавить» к «FormData»: параметр 2 не имеет типа «Blob» - person Jae Hyeok Kim; 12.06.2020
comment
Я думаю, что нашел, чего не хватает, так это того, как вы получаете файлы из штата, пожалуйста, проверьте обновленный ответ. - person adel; 12.06.2020
comment
К сожалению, это та же ошибка... как вы считаете, для ответа на вопрос нужны дополнительные коды? - person Jae Hyeok Kim; 12.06.2020
comment
здесь полный рабочий пример без ошибок, проверьте его codesandbox.io /s/thirsty-banzai-p0q6l?file=/src/App.js - person adel; 12.06.2020