时间戳

首页 > 解决方案 > 为什么当我将文件对象从前端发送到后端时它发生了变化？

node.js - 为什么当我将文件对象从前端发送到后端时它发生了变化？

问题描述

我将 react 用于前端，nodejs 用于后端，我正在使用 react-admin 为我的网站创建一个管理员，该网站基本上是一个商店，我正在尝试创建新产品并将其保存在数据库，一切正常，但我上传图片有问题。归根结底，我们知道图像是一个文件，所以当我在前端打印文件时，我得到了这个：

File {path: "usersForm.png", name: "usersForm.png", lastModified: 1616064578818, lastModifiedDate: Thu Mar 18 2021 11:49:38 GMT+0100 (Central European Standard Time), webkitRelativePath: "", …}
lastModified: 1616064578818
lastModifiedDate: Thu Mar 18 2021 11:49:38 GMT+0100 (Central European Standard Time) {}
name: "usersForm.png"
path: "usersForm.png"
size: 156658
type: "image/png"
webkitRelativePath: ""
__proto__: File

顺便说一下，这是在 dataprovider 中定义的创建函数：

reate: (resource, params) => {
    
    console.log(params.data.Images[0].rawFile);// this shows the file object 

    httpClient(`${apiUrl}/${resource}/Create`, {
      method: "POST",
      body: JSON.stringify(params.data),
    }).then(({ json }) => ({
      data: { ...params.data, id: json._id },
    }));
  },

现在，如果您看一下 create 函数，您会看到它发送了一个带有自定义数据（params.data）的发布请求，所以当后端（nodejs）接收到这些数据时，当我打印以查看时我得到的就是这个文件：

{ path: 'usersForm.png' }

这就是我 console.log 文件的方式：

  console.log(req.body.Images[0].rawFile);

我想要文件在前端，其中包含所有信息，以便我可以使用 multer 保存我想要的位置。 我的问题：为什么文件在发送后改变了？
如果我做错了什么，你可以指导你可以告诉我正确的道路。

标签： node.jsreactjsfilereact-admin

解决方案

这个问题的解决方案是
在 dataprovider 的 create 中发送带有表单数据的文件添加这个

 const formData = new FormData();

  for ( const param in params.data ) {

    // 1 file
    if (param === 'Images') {
      formData.append('file', params.data[param].rawFile);
      continue
    }

    // when using multiple files
    if (param === 'files') { // files remplace with your params data 
      params.data[param].forEach(file => {
        formData.append('files', file.rawFile);
      });
      continue
    }

    formData.append(param, params.data[param]);
  }

  return httpClient(`myendpoint.com/upload`, {
    method: "POST",
    body: formData, // but in body formdata 
  }).then(({ json }) => ({ data: json });

推荐阅读