使用 React 上传文件答案

【问题标题】：Upload file with React使用 React 上传文件
【发布时间】：2022-08-13 20:44:02
【问题描述】：

我想在前端制作一个简单的文件上传表单。然后，在后端，我会将有关该文件的信息传递给 API。

这是我在后端调用特定函数并传递数据的前端代码：

import React from \'react\';
import Axios from \'axios\';

const Upload = () => {
  // a local state to store the currently selected file.
  const [selectedFile, setSelectedFile] = React.useState(null);

  const handleSubmit = async (event) => {

    event.preventDefault()
    
    //Got all the Infos about my file
    console.log(selectedFile)
    
    const formData = new FormData();
    formData.append(\"selectedFile\", selectedFile);

     //Empty result
    console.log(formData)

    Axios.get(\"http://localhost:3001/upload\", {
      //I will pass the data to a function in the backend
      params: {
        data: formData,
      },
      
    })
      .then((Response) => {
        console.log(Response)
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  const handleFileSelect = (event) => {
    setSelectedFile(event.target.files[0])
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type=\"file\" onChange={handleFileSelect}/>
      <input type=\"submit\" value=\"Upload File\" />
    </form>
  )
};

export default Test

在后端，路由调用方法

router.get(\'/upload?\', Upload);

然后最后在后端处理函数

const ApiProcess = (req, res) => {
  var axios = require(\'axios\');
  var data = req.query

  console.log(req.query)
 
//All the API Stuff
  
}

但问题是我在后端收到空数据。我的代码有什么问题？

谢谢

编辑

在后端，我使用 multer 并在索引文件顶部添加 \'app.use(multer().any())\' 。这有助于导致我现在无法在后端访问简单的 formData。现在我的函数接收数据日志这个\'[对象：空原型] {}\'

任何想法？

标签： reactjs forms upload

【解决方案1】：

这是因为您的文件没有从前端转发改用FileReader

<input type="submit" value="Upload File" onChange={(e) => 
setFile(e.target.files)} />

const data = new FormData();

data.append(file[0])

然后您可以访问file[0]索引上的文件数据，存储数据后您可以将其转发到后端

【讨论】：

谢谢你的回答。但这或多或少是我没有做什么？首先，当输入文件更改时，我使用event.target.files[0] 设置状态，然后在提交表单时，我创建const data 并将状态附加在里面。这是相同的方法不是吗？

【解决方案2】：

您的代码中存在一些问题。

首先，上传请求通常是post 类型。您还应该在请求中发送Content-Type 标头。所以：

Axios.post("http://localhost:3001/upload", formData {
  headers: {
    'Content-Type': 'Multipart/formData',
  },
})

当您登录 formData 时，它始终是空的。您可以使用formData.keys() 或formData.values() 等方法查看其中的内容。

【讨论】：

谢谢@pedram。当我 console.log formData.keys() 或 formData.values() 它返回相同的东西：Iterator{}。当我使用 post 时，我应该更改后端的路由（我使用的是 express-router）吗？ router.post('/upload?', Upload) 而不是 router.get('/upload?', Upload) ？
@ArthurFortin 是的，将其更改为 post
谢谢。现在的问题是，即使我使用字符串进行测试，后端的函数也无法获取 formData。这是一个空的身体。
我想知道在我的前端脚本和处理 API 调用的后端脚本之间设置的路由器是否没有问题。因此，我将带有 Axios POST 的 formData 发送到以 router.post('/upload', Upload) 处理这种方式的快速路由器，然后是函数 const Upload = (req, res) => { console.log(req)}。我错过了什么@pedram 吗？