axios post 请求在浏览器中保持待处理状态（在邮递员中工作正常）

Question

我正在尝试创建一个发布请求以将文件发送到服务器。我使用 multer 进行文件上传并在后端设置一些文件验证（仅支持 jpeg 并且小于 5mb）。当我选择一个图像文件（甚至大于后端设置的限制）并发送它时，请求将被发送并被进一步处理。但是，当我尝试上传任何其他文件格式（如 mp4 或 pdf）时，请求保持待处理状态并最终失败，并且响应中没有任何错误。 我写了下面的代码：

// inside of a function that has 'data'
const image = new FormData();
images.append("image", data.images[0])
const response = await axios.post('http://localhost:8080/api/upload', image);
console.log(response)

我很困惑，因为 Postman 中一切正常。浏览器（或 Chrome）有什么不同。我尝试设置一些标头，例如 maxContentLength、maxBodyLength 但没有任何变化。 奇怪的是，我在后端收到文件详细信息，但它无法发送响应（仅在非图像的大文件的情况下）并且只是保持待处理状态

Answer 1

您使用了错误的附加内容

来自

images.append("image", data.images[0])

致

image.append("image", data.images[0])

演示

server.js

const express = require('express');
const cors = require('cors');
const multer = require('multer');

const app = express();
const upload = multer();
app.use(express.json());

app.use(cors());

app.post('/api/upload', upload.none(), (req, res) => {
    const image = req.body.image;
    console.log('Received image:', image);
    res.json({ image: image });
});

// Server listening
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

client.js

const axios = require('axios');
const FormData = require('form-data');
async function callUpload() {
    try {
        const data = {
            images: ["https://fakeimg.pl/500x500/cc6601", "https://fakeimg.pl/500x500/cc6602"]
        };
        const image = new FormData();
        image.append("image", data.images[0])

        const response = await axios.post('http://localhost:8080/api/upload', image, {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        });

    } catch (error) {
        console.error('Error:', error.response.data);
    }
}

callUpload();

package.json

{
  "dependencies": {
    "axios": "^1.6.8",
    "cors": "^2.8.5",
    "express": "^4.19.2",
    "form-data": "^4.0.0",
    "multer": "^1.4.5-lts.1"
  }
}

Result

左运行服务器：

node server.js

：右运行客户端：

node client.js