使用 axios 将更多数据与 formData 一起发送到 API答案

【问题标题】：sending more data along with formData to an API with axios使用 axios 将更多数据与 formData 一起发送到 API
【发布时间】：2021-07-29 02:12:27
【问题描述】：

我正在编写一个在文件夹中加载文件的 API

为了选择我使用 FormData 的文件。我用

<input type='file' ref={inputElement} onChange={handleChange} />

选择文件后，在使用axios发出请求

    const uploadFile = () => {
        const formData = new FormData();
        formData.append('file', file); // appending file
        axios
            .post('http://localhost:3001/upload', formData, {…

api 接收它并做它的事情

app.post('/upload', (req, res) => {
    if (!req.files) {
        return res.status(500).send({ msg: 'file not specified' });
    }
    // accessing the file
    const myFile = req.files.file;

效果很好。

但是，我想向端点发送额外的信息，所以，我将额外的信息和表单数据发送到 axios：

    const uploadFile = () => {
        const formData = new FormData();
        formData.append('file', file); // appending file
        axios
            .post('http://localhost:3001/upload', {data: formData, extraInfo: 'more info'}, {

在端点我写：

app.post('/upload', (req, res) => {
    console.log(req.body.extraInfo)
    console.log(req.body.data)

extraInfo 'more info'，好的，但是数据是空的，我以为数据应该包含formdata，但是它是空的，我该怎么做才能同时获取formData和extraInfo

提前致谢

拉斐尔

【问题讨论】：

您可以在formData 中附加更多数据作为键/值对。在您的服务器中获取如下值：req.body.key。查看更多关于 FormData here.
谢谢，我试试

标签： reactjs api input axios form-data

【解决方案1】：

只需将extraInfo 添加到formData，然后将其发送到您的服务器。您可能需要仔细检查您的服务器希望如何获取数据。

const uploadFile = () => {
    const formData = new FormData();
    formData.append('file', file); // appending file
    formData.append('extraInfo', "Some Info");// additonal data
    axios
        .post('http://localhost:3001/upload', formData, {

【讨论】：