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

Question

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

为了 select 我正在使用 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', ok，但是data是空的，我以为data应该是formdata，结果是空的，怎么才能同时得到formData和extraInfo呢

提前致谢

拉斐尔

Answer 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, {

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

sending more data along with formData to an API with axios

api

input

form-data

reactjs

axios