React Native 带有ExpressJS的FormData,包含图像和正文数据

wqsoz72f  于 2022-12-19  发布在  React
关注(0)|答案(1)|浏览(95)

你好我想问一个关于使用表单数据发送文件,同时也更新数据从用户在ExpressJS中的问题。我想问这是否可以处理所有在一个使用表单数据(保存图像和更新配置文件信息)通过axios或应该在两个(两个HTTP请求)处理?例如:

formData.append('file', {
        uri: file.uri,
        type: file.type,
        name: file.name,
      });
// and append for example a updated info
formData.append('profileUpdate', {
            name: newName,
            email: newEmail, 
            age: newAge,
          });

然后在快速路由端接收并彼此分离,或者您甚至可以使用表单-数据请求来执行此操作吗?或者有没有方法可以在PUT或POST请求(表单-数据)上发送身体分离
先谢谢你!

weylhg0b

weylhg0b1#

可以,您可以使用JavaScript中的FormData对象,通过一个HTTP请求发送文件和其他表单数据。
为此,您可以使用FormData对象的append方法将文件和其他表单数据添加到请求中。下面是一个如何执行此操作的示例:

const formData = new FormData();

formData.append('file', {
  uri: file.uri,
  type: file.type,
  name: file.name,
});

formData.append('profileUpdate', JSON.stringify({
  name: newName,
  email: newEmail,
  age: newAge,
}));

axios.post('/api/update-profile', formData).then((response) => {
  // handle the response here
});

在服务器端,可以使用multer中间件处理文件上传,使用body-parser中间件解析表单数据,来访问文件和其他表单数据,下面是一个示例,说明如何在Express.js路径中执行此操作:

const multer = require('multer');
const bodyParser = require('body-parser');

const upload = multer();

router.post('/update-profile', upload.single('file'), (req, res) => {
  // The file is available in req.file
  console.log(req.file);

  // The other form data is available in req.body
  console.log(req.body);

  // Update the profile here

  res.send('Profile updated');
});

这将允许您在单个HTTP请求中处理文件上载和其他表单数据。
或者,也可以使用put方法以类似的方式发送包含表单数据的PUT请求。

相关问题