react-admin - 如何从 blob URL 转换为二进制文件？

Question

我在迭代器中使用 ImageInput 组件在我的创建表单中上传图像，它会生成如下结构：

"data": {
    "items": [
        {
            "id": 1,
            "title": "test",
            "subTitle": "test",
            "additionalAttributes": {
                "price": "3452345"
            },
            "images": [
                {
                    "src": {
                        "rawFile": {
                            "path": "test.jpg"
                        },
                        "src": "blob:https://localhost:44323/82c04494-244a-49eb-9d0e-6bca5a3469f7",
                        "title": "test.jpg"
                    },
                    "title": "d"
                }
            ]
        }
    ],
    "contact": {
        "firstName": "test",
        "lastName": "test",
        "jobTitle": "test",
        "emailAddress": "[e-mail]",
        "phoneNumber": "23234"
    },
    "theme_id": 1,
    "endDate": "2020-06-19T22:27:00.000Z",
    "status": "2"
}

}

我想要做的是将图像发送到 API 以保存在文件夹中。Blob URL 是浏览器中的一个内部对象，它不能在 API 中使用，所以我尝试将 Blob URL 转换为二进制文件并发送到 API。

按照教程我无法得到预期的结果。这是我的代码：

我像这样创建了一个新的 dataProvider：

export const PrivateEventProvider = {
  create: (resource: string, params: any) => {
    convertFileToBase64(params.data.items[0].images[0].src.src).then(
        transformedPicture => {
            console.log(`transformedPicture: ${transformedPicture}`);
        }
    );

    const convertFileToBase64 = (file: { rawFile: Blob }) =>
        new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onload = () => resolve(reader.result);
            reader.onerror = reject;

            reader.readAsDataURL(file.rawFile);
        });

我有这个错误

未处理的拒绝（TypeError）：无法在“FileReader”上执行“readAsDataURL”：参数 1 不是“Blob”类型。

在此处输入图像描述

所以我的问题是，使用 react-admin 将图像上传到文件夹的正确方法是什么？

标签： react-admin