用 React 制作一个 POST form-data 来上传图片

Question

我正在尝试通过我的 API 将我的 ReactJS 服务中的图像上传到我的 NestJS API 服务，但它还没有工作。这是 React 代码：

首先是表格：

<div>
 <input type="file" name="urlpromo" value={urlpromo} onChange={this.changeHandler} />
</div>
<button type="submit">Submit</button>

和功能：

changeHandler = (e) => {
    this.setState({[e.target.name]: e.target.value})
}

submitBaner = (e) => {
        var bodyFormData = new FormData();

        bodyFormData.append('file', this.state.urlpromo);
        
        let config = {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data',
              }
        }
        e.preventDefault()
        console.log(bodyFormData)
        axios.post('http://localhost:3000/images/upload', bodyFormData,config)
    }

问题是，在我发送图像之前，仅使用 JSON 主体，它工作正常，但现在使用表单数据，我无法使其工作。这就是我如何使用 Postman 上传图片：

当我尝试让它工作时，函数控制台日志打印如下：

FormData {}__proto__: FormData

我做错了什么，我应该如何处理这个表单数据？

Answer 1

根据 the docs，<input type="file"> 由于其只读值 不受控制。

一种选择是使用 ref 跟踪 <input> 元素，使用 files 属性访问 File

// in your constructor
this.urlPromoRef = React.createRef()

<div>
 <input type="file" ref={this.urlPromoRef} />
</div>
<button type="submit">Submit</button>

并在您的提交处理程序中

e.preventDefault()
const bodyFormData = new FormData();
bodyFormData.append('file', this.urlPromoRef.files[0]);

// no need for extra headers
axios.post('http://localhost:3000/images/upload', bodyFormData)

另一种选择是简单地将 <form> 本身传递给 FormData 构造函数。

<form onSubmit={this.submitBaner}>
  <div>
    <input type="file" name="urlpromo" /> <!-- must have a name -->
  </div>
  <button type="submit">Submit</button>
</form>

submitBaner = (e) => {
  e.preventDefault()

  const bodyFormData = new FormData(e.target); // pass in the form

  axios.post('http://localhost:3000/images/upload', bodyFormData)
}

最后，您可以使用与原始代码类似的东西，但需要对 <input type="file"> 进行特殊检查。例如

changeHandler = (e) => {
  const el = e.target
  this.setState({
    [el.name]: el.type === "file" ? el.files[0] : el.value
  })
}

用 React 制作一个 POST form-data 来上传图片

Make a POST form-data with React to upload an image

reactjs

postman

axios

nestjs