Question

我需要在React中上传一个文件，然后将其发送到Express服务器（我是Express的新手，所以对我来说很难）

我成功将文件上传到我的React组件中，但是现在我不知道如何将其发送到Express制成的后端服务器上。

我需要使用什么？ Axios还是Fetch？获取还是发布？谢谢！

我的App.js文件（前端）

private LinkedHashMap<String, String> filter;

}

和我的server.js文件（后端）

uploadFile = () => {
const { currentFileName, currentFileType } = this.state;
if (currentFileName && currentFileType) {
  fetch('http://localhost:5000/upload/files', {
    method: "POST",
    headers: {
      'Content-type': 'application/json'
    },
    body: JSON.stringify(this.state)
  })
  .then((res) => res.json())
  .then(res => {
    this.setState({
      errorMessage: "",
      successMessage: `Votre fichier ${currentFileName} a bien été uploadé !`
    });
    console.log(res);
    console.log(res.data);
  })
} else {
  this.setState({
    errorMessage: "Veuillez choisir un fichier avant d'appuyer sur le bouton Upload !"
  });
}

我希望在localhost：5000 / upload / files中获取状态数据，但是当我进入URL时，消息为“ Cannot GET / upload / files”

有人可以帮我吗？谢谢！

Answer 1

您可以使用axios上传文件。

const yourFile = file // Assume this is your file.

现在您需要将其添加到表单数据中。

const formData = new FormData();
formData.append('file', yourFile);

现在：

axios.post('/yourEndpoint', formData).then(res => {
  //Now do what you want with the response;
})

在您的NodeJS应用中：

app.post('/yourEndpoint', function(req,res){
  fs.readFile(req.files.file.path, function(err, data){
    // Do something with the data (which holds the file information)
  });
});

Answer 2

由于您要发送文件，因此最好使用Post（快速提示：需要从服务器获取数据时使用Get，而需要将数据发布到服务器时使用Post）。 / p>

接下来，您应该看看multer，这是一个用于处理multipart / form-data的中间件。

最后，在您的反应中，您只需要使用获取的多部分形式发送文件

Answer 3

在前端获取文件

 <input type="file" id="inputGroupFile01" 
    onChange={(e) => this.onSelectImageHandler(e.target.files)}
/>

您必须将文件作为FormData发送到服务器，如下所示：

onSelectImageHandler = (files) => {
    const file = files[0];
    const formData = new FormData();
    formData.append('file', file)

    const config = {
        headers: {
            "Contetnt-Type":"multipart/form-data" 
        }
    };
}

一旦设置了FormData，就可以使用axios进行呼叫。

然后，您需要在服务器端安装multer软件包 $ npm i -S multer，然后在您的server.js文件上。

const multer = require('multer');

毕竟，您可以在开始时就配置multer。

const upload = multer({dest: 'public/uploads/'}).single('file');

然后在您的路线上

app.post('/upload/files', (req, res) => {
    upload(req,res, (err) => {
        const file = req.file
    const prevUrl = req.body.prevUrl.slice(21) //I use slice to cut the public part of the path, since mine is accessible from anywhere.
    if(!err){
        //here you could add some call to save the prevUrl "url of the file to called it later on your front"
        return User.findOneAndUpdate({_id:req.decoded.userId},{avatarUrl:avatarUrl}, (err, user) => {
            if(!err){       
                return console.log(err)
                })
                return res.json({success:true, message:"File has been successfully uploaded",avatarUrl:"http://localhost:3231/uploads/"+file.filename});
            }
            console.log(err);
        })
    }
    console.log(err);
    })
});

希望有帮助。

在React中上传文件并将其发送到Express服务器

3 个答案: