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

Question

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

下面，我试图解释我想做的事情......

这是前端的样子：

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