如何使用Axios将图像发送到Node.js？

11 浏览
0 Comments

如何使用Axios将图像发送到Node.js？

有没有一种方法可以使用axios将图片数组（或单个图片）发送到node端？

我正在使用的axios代码（我在前端使用的是react js）：

onFormSubmit(event){
    event.preventDefault();
    let payload = this.state;
    console.log("in onFormSubmit!!! with state: ", this.state, "and payload: ", payload);
    axios.post('/api/art', payload)
    .then(function(response){
    console.log('保存成功')
  });

我所做的研究表明，也许没有一种支持的方法可以使用axios将图片文件发送到node端，但这对我来说似乎很奇怪。有办法吗？

0

3 答案

0 Comments

Axios是一个流行的用于发送HTTP请求的JavaScript库。它可以在浏览器和Node.js环境中使用。然而，当我们尝试使用Axios发送图像数据到Node.js时，可能会遇到一些问题。

这篇文章中，有人分享了如何通过Axios将图像发送给Node.js的解决方法。首先，他们使用了一个叫做FormData的对象。为了使用这个对象，他们需要导入它，并且在导入之前需要运行npm install安装相应的依赖。

接下来，他们展示了如何在action中使用FormData对象来发送图像数据。他们首先创建了一个FormData对象，并使用append方法将图像文件添加到FormData对象中。然后，他们使用axios.post方法发送请求，并在配置对象中包含一些头信息。其中，最重要的是设置Content-Type为multipart/form-data，这表示我们正在发送一个多部分的表单数据。此外，他们还在Content-Type头信息中添加了一个boundary参数，该参数是从之前创建的FormData对象中获取的。

这篇文章还回答了一些相关的问题和疑问。某些情况下不需要导入FormData对象，除非你在尝试兼容IE<=9。还有人指出，使用FormData对象来上传文件是完全可以接受的，因为大多数body-parser库无法处理多部分请求体，而且自己解析请求体也不被推荐。另外，还某些情况下file.fileName是过时和非标准的，应该使用file.name代替。

最后，还有一些人分享了他们在使用Axios发送图像数据时遇到的问题和解决方法。有人遇到了后端无法解析请求的问题，最终发现是请求的格式不正确。还某些情况下需要使用multer中间件来解析图像数据。

总之，通过使用FormData对象和正确设置请求头信息，我们可以使用Axios将图像数据发送给Node.js。这篇文章中的解决方法可以帮助我们解决在这个过程中可能遇到的问题。

0
0 Comments

问题：如何使用Axios将图像发送到Node.js？

原因：

- 通过阅读代码，可以看出问题的原因是没有正确处理多部分请求。

- 在Axios的POST请求中，使用了FormData对象来包装文件和其他表单数据。但是，由于没有使用正确的中间件处理多部分请求，导致在Node.js服务器端无法正确解析请求。

解决方法：

1. 在Node.js服务器端，确保使用一些中间件来处理多部分请求。这里使用了multer中间件。

2. 在服务器端设置好multer中间件后，即可正确解析请求，并获取到正确的数据。

3. 在请求的结果中，可以通过req.body获取到表单数据，通过req.files获取到文件数据。

下面是代码示例：

// 前端代码
onFormSubmit(event){
    var form = new FormData();
    files.forEach(file => {
        form.append(file.name, file);
    });
    form.append('foo', 'bar');
    axios.post('/api/art', form);
}
// 服务器端代码
const express = require('express');
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
const app = express();
app.post('/api/art', upload.any(), (req, res) => {
    console.log('req.body:', req.body);
    console.log('req.files:', req.files);
    // 其他处理逻辑
});
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在上面的代码中，通过使用multer中间件来处理多部分请求。在服务器端，通过req.body可以获取到表单数据，通过req.files可以获取到文件数据。这样，就可以正确地处理由Axios发送的图像数据了。

0
0 Comments

问题：如何使用Axios将图像发送到Node.js？

原因：在使用Axios发送图像时，需要设置请求的Content-Type头。这是因为Axios默认的Content-Type是"application/json"，而不是适用于图像的"image/jpeg"或"image/png"等类型。

解决方法：可以通过在Axios请求中设置headers来指定Content-Type为图像的类型。需要将图像文件转换为HTML5文件对象，并将其作为请求的第二个参数。以下是示例代码：

axios.put(url, imageFile, {
  headers: {
    'Content-Type': imageFile.type
}
});

其中，imageFile是一个HTML5文件对象，应该是一个图像文件。

0