尝试将React-Admin ImageInput文件转换为base64时错误

Question

之后官方react-admin docs /图像上传。我在Chrome Console日志中偶然发现了此错误：

它每次从编辑页面调用更新API方法时显示 代码结构如下：

export const PlayerEdit = () => (
  <Edit>
    <SimpleForm>
      <TextInput source="id" />
      <NumberInput source="active" />
      <TextInput source="name" />
      <TextInput source="email" />
      <ImageInput source="profileImgShow" multiple={true} accept="image/png">
        <ImageField source="src" title="title" />
      </ImageInput>

      <TextInput source="new_password" />
      <TextInput source="repeat_password" />

      <DateInput source="register_date" />
      <DateInput source="createdAt" />
      <DateInput source="updatedAt" />
    </SimpleForm>
  </Edit>
);

我将更新API调用与此助手功能包装，以添加上载功能并促进Base64转换。

export const convertFileToBase64 = (file) => {
  console.log("rawFile", file.rawFile);
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file.rawFile);
  });
};

/**
 * For posts update only, convert uploaded image in base 64 and attach it to
 * the `picture` sent property, with `src` and `title` attributes.
 */
const addUploadFeature = (requestHandler) => (resource, params) => {
  //console.log(resource, params);
  if (resource === "players") {
    // notice that following condition can be true only when `<ImageInput source="pictures" />` component has parameter `multiple={true}`
    // if parameter `multiple` is false, then data.pictures is not an array, but single object
    if (params.data.profileImgShow && params.data.profileImgShow.length) {
      // only freshly dropped pictures are instance of File

      const formerPictures = params.data.profileImgShow.filter(
        (p) => !(p.rawFile instanceof File)
      );

      const newPictures = params.data.profileImgShow.filter(
        (p) => p.rawFile instanceof File
      );

      return Promise.all(formerPictures.map(convertFileToBase64))
        .then((base64Pictures) =>
          base64Pictures.map((picture64) => ({
            src: picture64,
            title: `${newPictures.title}`,
          }))
        )
        .then((transformedNewPictures) =>
          requestHandler(resource, {
            ...params,
            data: {
              ...params.data,
              profileImgShow: [...transformedNewPictures, ...formerPictures],
            },
          })
        );
    }
  }
  // for other request types and resources, fall back to the default request handler
  //return requestHandler(type, resource, params);
};

export default addUploadFeature;

这样：

 update: addUploadFeature((resource, params) => {
    //console.log(params);
    return httpClient(`${apiUrl}/${resource}/${params.id}`, {
      method: "PUT",
      body: JSON.stringify(params.data),
    }).then(({ json }) => ({ data: json }));
  }),

但是由于某种原因，Convetfiletobase64从未被打来过，我的猜测是因为 ImageInput组件提供的图像/文件的数组具有类型[对象]而不是[文件] 或[blob]因此，按类型过程的过滤总是失败：

  const newPictures = params.data.profileImgShow.filter(
    (p) => p.rawFile instanceof File
  );

我是在做错事，还是是提供错误类型的文件类型的React-Admin组件？ 附件的图像显示了通过以前的图片阵列而不是新模式的结果 因为过滤行返回始终为新图片的空数组，并且只有以前的图表contian从ImageInput收到的文件。

我要重新启动的文件：

{
    "path": "logo192.png",
    "name": "logo192.png",
    "lastModified": 1635067661651,
    "lastModifiedDate": "2021-10-24T09:27:41.651Z",
    "webkitRelativePath": "",
    "size": 12630,
    "type": "image/png"
}

更新：

我在codesandbox.io上编辑了教程示例以重现此问题，奇怪的是，奇怪的imageInput返回了类型[file]而不是[object]的对象，但是两个react和react-dom版本都是^17.0.0在沙盒中，在我的计算机上，我降级到旧版本（17.0.0），但仍然没有运气的rabfile仍然具有[对象]的类型，而不是[file]。

更新2： 我终于注意到，在React-Admin官方文档中，他们使用纱线代替NPM，因此我改用Yarn和Voalla，一切正常。

那是我的package.json文件：

{
  "name": "admin-panel",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "prop-types": "^15.8.1",
    "ra-data-json-server": "^4.1.0",
    "react": "^18.1.0",
    "react-admin": "^4.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}