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

Question

我将 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) 的 post 请求，所以当后端 (nodejs) 接收到此数据时，当我这样做时打印以查看我得到的文件：

{ path: 'usersForm.png' }

这就是我控制台记录文件的方式：

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

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

Answer 1

这个问题的解决方法是发送带有表单数据的文件
在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 });