ImageInput上传base64图片

Question

各位，我在我的项目中使用 ImageInput：

<ImageInput source="pictures" accept="image/*">
  <ImageField source="src" title="title" />
</ImageInput>

并且通过教程我包装了 restclient

const uploadCapableClient = addUploadCapabilities(restClient);

并传给了

<Admin restClient={uploadCapableClient}> ... </Admin>

而addUploadCapabilities的代码是

const convertFileToBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);

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

const addUploadCapabilities = requestHandler => (type, resource, params) => {
    if (type === 'UPDATE' && resource === 'news') {
        if (params.data.pictures && params.data.pictures.length) {
            // only freshly dropped pictures are instance of File
            const formerPictures = params.data.pictures.filter(p => !(p instanceof File));
            const newPictures = params.data.pictures.filter(p => p instanceof File);

            return Promise.all(newPictures.map(convertFileToBase64))
                .then(base64Pictures => base64Pictures.map(picture64 => ({
                    src: picture64,
                    title: `${params.data.title}`,
                })))
                .then(transformedNewPictures => requestHandler(type, resource, {
                    ...params,
                    data: {
                        ...params.data,
                        pictures: [...transformedNewPictures, ...formerPictures],
                    },
                }));
        }
    }

    return requestHandler(type, resource, params);
};

export default addUploadCapabilities;

完全复制粘贴教程https://marmelab.com/admin-on-rest/RestClients.html#decorating-your-rest-client-example-of-file-upload

前段时间它运行良好。在后端我可以看到大的 base64 编码文本。但现在我看到了：

{"rawFile"=>{"preview"=>"blob:http://admin.dev/8ec17f33-6234-42b2-a40c-bcbfc17d4a99"}, "src"=>"blob:http://admin.dev/8ec17f33-6234-42b2-a40c-bcbfc17d4a99", "title"=>"out.png"}

所以，有人可以尝试将 AOR 更新到最新版本 1.2.1 并使用 ImageInput 检查吗？

感谢

我认为问题可以从这几行开始：

// function addUploadCapabilities
const newPictures = params.data.pictures.filter(p => p instanceof File);

没有 params.data.pictures 即 instanceof File 这就是 convertFileToBase64 函数未被调用的原因。

我很乐意提出任何建议。谢谢

谢谢大家。这是 admin-on-rest 1.2.1

上的工作代码

/**
 * Convert a `File` object returned by the upload input into
 * a base 64 string. That's easier to use on FakeRest, used on
 * the ng-admin example. But that's probably not the most optimized
 * way to do in a production database.
 */
const convertFileToBase64 = file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file.rawFile);

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

/**
 * For posts update only, convert uploaded image in base 64 and attach it to
 * the `picture` sent property, with `src` and `title` attributes.
 */
const addUploadCapabilities = requestHandler => (type, resource, params) => {
    if ((type === 'UPDATE' || type === 'CREATE') && resource === 'news') {
        if (params.data.pictures && params.data.pictures.length) {
            // only freshly dropped pictures are instance of File
            const formerPictures = params.data.pictures.filter(p => !(p.rawFile instanceof File));
            const newPictures = params.data.pictures.filter(p => p.rawFile instanceof File);

            return Promise.all(newPictures.map(convertFileToBase64))
                .then(base64Pictures => base64Pictures.map(picture64 => ({
                    src: picture64,
                    title: `${params.data.title}`,
                })))
                .then(transformedNewPictures => requestHandler(type, resource, {
                    ...params,
                    data: {
                        ...params.data,
                        pictures: [...transformedNewPictures, ...formerPictures],
                    },
                }));
        }
    }

    return requestHandler(type, resource, params);
};

export default addUploadCapabilities;

Answer 1

是的，这可能是因为最近的更改（虽然找不到 PR）。

文件已转换 here，因此您可能想要过滤 rawFile 属性，它是 File.

的一个实例

我将创建一个问题以便我们修复文档

Answer 2

在addUploadFeature.js中，更改：

reader.readAsDataURL(file.rawFile);

至

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

ImageInput上传base64图片

ImageInput upload base64 pictures

admin-on-rest