使用 React-admin 和 Laravel API 上传图像时遇到问题

Question

使用 Postman 可以正常使用图像上传功能。

问题是，当我将 React-Admin 框架与 Laravel API 集成时，图像上传似乎不起作用。

根据 React-Admin 文档，它要求我们在发布之前“将图像文件输入转换为 Base 64 字符串”。我已经按照 React-Admin 文档中的说明实现了它。我觉得我在这里错过了一些东西。

提前感谢您对这个问题的一些说明。

---

图片上传的React-Admin代码如下：

App.js

<Admin dataProvider={dataProvider} authProvider={authProvider} >
    <Resource name='partners' list={PartnerList} create={PartnerCreate} />
</Admin>

PartnerCreate.jsx

<Create title='Add Partner' {...props}>
    <SimpleForm>
        <TextInput label='Name of a partner' source='name' />
        <TextInput label='Slug' source='slug' />
        <ImageInput label='Upload image' source='image'>
            <ImageField title='title' source='src' />
        </ImageInput>
    </SimpleForm>
</Create>

dataProvider.jsx

import { fetchUtils, withLifecycleCallbacks } from 'react-admin';
import simpleRestProvider from 'ra-data-simple-rest';

const httpClient = (url, options = {}) => {
    if (!options.headers) {
        options.headers = new Headers({ Accept: 'application/json' });
    }

    const token = JSON.parse(localStorage.getItem('token'));
    options.headers.set('Authorization', `Bearer ${token}`);
    return fetchUtils.fetchJson(url, options);
};

const baseDataProvider = simpleRestProvider('http://localhost:3000/api', httpClient);

const dataProvider = withLifecycleCallbacks(baseDataProvider, [
{
    // Handling file uploads when uploading new image file
    resource: 'partners',
    beforeSave: async (data, dataProvider) => {
        // Freshly dropped picture is File object and must be converted to base64 strings
        const newImage = data.image;

    return Promise.resolve(convertFileToBase64(newImage))
        .then((base64Picture) => ({
            src: base64Picture,
            title: `${data.image.title}`,
        }))
        .then(transformedNewPicture => {
            dataProvider.create('partners', {
                data: {
                    ...data,
                    image: {
                        ...data.image,
                        src: transformedNewPicture.src,
                        title: transformedNewPicture.title,
                    },
                },
            });
        });
    }
}
]);

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

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

export default dataProvider;

它会导致以下错误：

1. 
2. 
3. 

Answer 1

注意你的请求的结构，根据错误信息，服务器期望的图像字段是这种形式：

...
  image: "data:image/jpeg;base64,..."
...