如何将文件从 React 上传到 Express 服务器？

Question

我在将文件从 react 上传到服务器端时遇到了一些问题，你能告诉我它必须如何正确制作吗？

Bellow，我试图解释我想要做什么......

这是前端的样子：

uploadFile(e) {
  let file = e.target.files[0];
  axios.post("/uploadFileAPI", file);
}

<input type="file" onChange={this.uploadFile()} />

这是后端：

router.post("/uploadFileAPI", (req, res) => {
  console.log(req.body.file); //Just need to console log fetched files here or it's path maybe
});

我希望你明白我想要做什么。你能告诉我一个应该如何正确实施的例子吗？谢谢

Answer 1

进行以下更改。

<input type="file" onChange={this.uploadFile} />

import axios from 'axios';
uploadFile(event){
  const data = new FormData() ;
  data.append('file', event.target.files[0]);
  axios.post("${apiUrl}/uploadFileAPI", data)
      .then(res => { // then print response status
        console.log(res.statusText)
      })
}

api端

const multer = require('multer');
const storage = multer.diskStorage({
    destination: (req, file, callBack) => {
        callBack(null, 'uploads')
    },
    filename: (req, file, callBack) => {
        callBack(null, `${file.originalname}`)
    }
  })
let upload = multer({ dest: 'uploads/' })
const server = express();
server.post('/uploadFileAPI', upload.single('file'), (req, res, next) => {
    const file = req.file;
    console.log(file.filename);
    if (!file) {
      const error = new Error('No File')
      error.httpStatusCode = 400
      return next(error)
    }
      res.send(file);
  })

要了解此信息，请参阅 https://www.youtube.com/watch?v=-Hvmj8yXfyU

Answer 2

您正在调用onChange 中的函数。您需要传递函数引用。

<input type="file" onChange={this.uploadFile} /> // remove the parenthesis i.e. ()

编辑基于评论：

为了在后端接收文件，您可以使用 multer 或 express-fileupload 之类的库。 Multer是一个受欢迎的选择。网上有很多资源可以从前端和后端的角度为您提供帮助。 例如，请参阅这些：

• react-file-upload

• Upload a file in React and send it to an Express server

  尝试一下，遇到问题时再回来。