我必须在 React 中使用 FormData() 将文件发送到服务器吗？答案

【问题标题】：Do I have to send files to a server using FormData() in React?我必须在 React 中使用 FormData() 将文件发送到服务器吗？
【发布时间】：2021-10-02 18:33:50
【问题描述】：

我想从客户端上传图像并将其发送到 React 中的服务器。我搜索了一下，发现大多数教程/指南使用“文件”类型输入上传图像，然后将其附加到 FormData 对象以发送到服务器。

我是否需要创建 formData 对象，或者我可以像只使用文本/数字一样发送吗？它可以与这样的常规对象一起使用吗：

    const [selectedFile, setSelectedFile] = useState(null);
    
      const onFileChange = (e: any) => {
        setSelectedFile(e.target.files[0]);
        console.log(e.target.files[0]);
      };
    
        let newTodo = {
          title:'New Todo',
          description: 'A new task'
          todo_pic: selectedFile,
        };

提前致谢！

【问题讨论】：

标签： javascript reactjs upload

【解决方案1】：

这取决于后端程序期望什么，base-64 编码的 blob 或 FormData，您要做的是将文件附加到 formData 或传递 form 事件作为初始参数，这里是一个示例代码：

function BlahBlah() {
  const [image, setImage] = React.useState(undefined);

  const handleOnChangeFile = (event) => {
    const imgFile = event.target.files[0];
    const reader = new FileReader();

    reader.addEventListener("loadend", (val) => {
      setImage({
        file: imgFile,
        blob: val.srcElement.result
      });
    });

    reader.readAsDataURL(imgFile);
  };

  const handleSubmit = () => {
    if (image) {
      const formData = new FormData();
      formData.append("IMAGE", image.file);

      console.log("FormData:", formData.get("IMAGE"));
      console.log("base-64 encoded blob:", image.blob);

      //here you can use XHR/Axios to upload image, e.g:
      /*
        axios.post("/file-uploader", (formData OR image.blob));
      */
    }
  };

  return (
    <div>
      <h1>take a look into console!</h1>
      <input type="file" onChange={handleOnChangeFile} />
      <button disabled={image ? false : true} onClick={handleSubmit}>
        Submit!
      </button>
    </div>
  );
}

sandbox link

【讨论】：