React setState 无法分配 fileList 而是分配第一个 fileName 的字符串

Question

首先，我正在制作一个简单的社交媒体应用程序。我正在尝试提交包含文本、图像和视频的表单。我提交表单的前端是用 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())".

因此，当我在 handleChange 中的 setState 之前控制台记录 e.target.files 内容时，我得到了正常的 FileList，其中列出了所有图像文件。但是当我在 handleChange 中的 setState 之后控制台登录 this.state.imgInput 时，我得到了 String of C://fakepath/filename，而不是 fileList。（最初 state.imgInput 是空的。当我看到其他示例和代码时， e.target.files 是 fileList 所以我在其他地方感到困惑我犯了错误。

我在这个问题上花了半天时间，我在晕倒前 5 秒，所以任何建议将不胜感激 :) 感谢您的阅读。

Answer 1

是的，发生这种情况是因为事件已经消失，您需要将 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
      }));
    }
  };

React setState 无法分配 fileList 而是分配第一个 fileName 的字符串

React setState cannot assign fileList instead assigns string of first fileName

html

reactjs

forms

submit

setstate