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

在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);

Answer 2

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

文件已转换为here，因此您可能希望过滤rawFile属性，该属性是File的实例。

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

ImageInput上传base64图片

2 个答案: