如何在react admin中显示上传进度？

Question

所以我正在使用react-admin https://marmelab.com/react-admin，我想在创建功能上发送文件时显示上传进度。

import React from "react";
import { Create, SimpleForm, FileInput, FileField } from "react-admin";

export const PostFile = props => (
  <Create {...props}>
    <SimpleForm>
      <FileInput source="pictures" label="Related files" multiple={true}>
        <FileField source="src" title="title" />
      </FileInput>
    </SimpleForm>
  </Create>
);

Answer 1

react-admin使用'乐观渲染'，因此当您开始在数据提供者中上传时，您拖放文件的创建或编辑表单可能会消失，因此您无法在同一位置显示进度栏形成。这可能就是为什么它不属于API的原因...

但是您可以实现一个简单的全局事件发射器，该事件发射器从数据提供者发出“文件上传进度”事件，并让顶级应用订阅这些事件，并在事件处理程序中更新本地应用状态中的进度值，然后有一个通知类型的组件，当您处于上传状态时会呈现该进度值。这样做的好处是您无需更改任何Redux。react-admin确实提供了一个“ useNotify”钩子，您可以在数据提供程序中使用该钩子来显示通知，但这仅用于简单的文本通知。