反应管理员 |无法使用 FileInput 上传文件

Question

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

文件选择步骤（从电脑到浏览器）工作正常，但我的问题是我无法在该步骤后处理文件。我阅读了文档，但我不知道该怎么做。我尝试了很多不同的方法，但我越来越疯狂了。

下面是基本代码。我想我必须添加一个处理程序或类似的东西但是，如何？我对 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 并按照此 link:

下的示例对其进行自定义

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

Answer 2

经过几个小时的努力，我开始工作了。

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

来自 docs:

save: The function invoked when the form is submitted. This is passed automatically by react-admin when the form component is used inside Create and Edit components.

第二个问题： 在我的例子中，我一次上传一个文件（FileInput 中的 multiple={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 prop.

您可以使用以下代码：

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

而不是：

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

反应管理员 |无法使用 FileInput 上传文件

React-Admin | Cannot upload a file using FileInput

admin-on-rest

react-admin