Question

第一次使用 React-Admin 。我使用它来创建一个面板，该面板基本上监视从API获得的一些参数。但是，只有一部分需要上传.csv文件。我正在尝试使用 FileInput 来实现它，但无法捕获文件。我不知道该怎么做。

文件选择步骤（从PC到浏览器）正常运行，但是我的问题是在该步骤之后我无法处理文件。我阅读了文档，但是我不知道该怎么做。我尝试了许多不同的方法，但是我快要疯了。

下面是基本代码。我想我必须添加一个处理程序或类似的东西，但是，怎么办？我对React也没有经验。我知道一些基础知识，但我只是构建了几个（超级）简单应用程序。只是为了学习。

// UploadFile.js
...

export const UploadSection = props => (
    <SimpleForm>
        <FileInput source="csvFile" label="Upload file (.csv)" accept="text/csv" >
            <FileField source="src" title="title" />
        </FileInput>
    </SimpleForm>
);


// App.js
...

const App = () => (
    <Admin dataProvider={dataProvider} authProvider={authProvider} >
        ...
        <Resource name="uploadSection" list={UploadSection} />
        ...
    </Admin>
);

问题：

如何捕获.csv文件？

谢谢！

Answer 1

您是否已查看文档中的DataProvider和UploadFeature部分？如果您拥有自己的DataProvider，则可以创建一个新文件addUploadFeature.js并按照以下链接中的示例进行自定义：

https://marmelab.com/react-admin/DataProviders.html#decorating-your-data-provider-example-of-file-upload

Answer 2

几个小时后，我开始工作了。

第一个问题（我在@selens答案中回答了这个问题）：由于没有在“创建”或“编辑视图”中工作，所以得到了Uncaught TypeError: _this.props.save is not a function。看来您需要在“创建”或“编辑”视图中使用FileInput。否则，“保存”按钮将不起作用。

来自docs：

保存：提交表单时调用的函数。当在“创建”和“编辑”组件中使用表单组件时，此命令会由react-admin自动传递。

第二个问题：就我而言，我一次上传一个文件（在FileInput中为多个= {false}）。但是，代码addUploadFeature.js已准备好与多个文件一起使用。因此，我编辑了addUploadFeature.js的一部分，仅上传了一个文件。请参见下面的完整文件。

// addUploadFeature.js

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

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

const addUploadFeature = requestHandler => (type, resource, params) => {

    if (type === 'UPDATE' && resource === 'myResource') {

        if (params.data.myFile) {

            // NEW CODE HERE (to upload just one file):
            const myFile = params.data.myFile;
            if ( !myFile.rawFile instanceof File ){
                return Promise.reject('Error: Not a file...'); // Didn't test this...
            }

            return Promise.resolve( convertFileToBase64(myFile) )
                .then( (picture64) => ({
                    src: picture64,
                    title: `${myFile.title}`
                }))
                .then( transformedMyFile => requestHandler(type, resource, {
                    ...params,
                    data: {
                        ...params.data,
                        myFile: transformedMyFile
                    }
                }));
        }
    }
    return requestHandler(type, resource, params);
};

export default addUploadFeature;

毕竟，我能够将文件以Base64格式发送到服务器。

希望这对将来对某人有用；）

Answer 3

我有类似的问题，我无法上传文件，问题将在accept属性中。

您可以使用以下代码：

<FileInput source="csvFile" label="Upload file (.csv)" accept=".csv" >

代替：

<FileInput source="csvFile" label="Upload file (.csv)" accept="text/csv" >

React-Admin |无法使用FileInput上传文件

3 个答案: