在过去的几个月里,我一直在研究一个名为react-uploady的新库。

这是一个单一存储库,其中包含多个构建在彼此之上的包,以提供一个非常全面的文件上传相关功能库。

总体而言,它的方向是面向 React 应用程序,尽管可以利用所有基础包,而不管正在使用的 UI 库/框架。

我构建它的重点(除了学习很多东西)是提供一个非常简单易用的库,而且还可以配置和扩展。以及满足所有文件上传需求的一站式服务。

我想通过几个例子来介绍它:

简单上传按钮

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <UploadButton/>
</Uploady>);

进入全屏模式 退出全屏模式

这就是在您的应用程序中获得有效上传按钮所需的所有代码。

您使用<Uploady>包装您的应用程序或应用程序的一部分,并且在内部任何地方您都可以使用<UploadButton>组件。

任何东西都是上传按钮

您不必使用 UploadButton,您可以使用asUploadButtonhoc 将任何组件合二为一。

import React from "react";
import Uploady from "@rpldy/uploady";
import { asUploadButton } from "@rpldy/upload-button";

const DivUploadButton = asUploadButton(forwardRef((props, ref) => {
    return <div {...props}
                style={{ border: "1px solid red", width: "200px", cursor: "pointer" }}
                id="div-upload">
        This is a DIV & Upload Button
    </div>
}));


const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <DivUploadButton/>
</Uploady>);

进入全屏模式 退出全屏模式

显示上传进度

使用rc-progress通过useItemProgressListener钩子显示上传进度:

import React, { useState } from "react";
import { Circle } from "rc-progress";
import Uploady, { useItemProgressListener } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const UploadProgress = () => { 
   const [progress, setProgess] = useState(0);
   const progressData = useItemProgressListener();   

if (progressData && progressData.completed > progress) { 
     setProgess(() => progressData.completed);
   }  

 return progressData && <Circle style={{ height: "100px" }}              
                                  strokeWidth={2}
                                  strokeColor={progress === 100 ? "#00a626" : "#2db7f5"}
                                  percent={progress} />;
};

const App = () => <Uploady 
                destination={{ url: "http://sample-server.comm" }}>
    <UploadButton />
    <SampleProgress />
</Uploady>;

进入全屏模式 退出全屏模式

以编程方式取消上传

使用useBatchStartListener挂钩取消任何超过 10 个文件的批处理:

import React from "react";
import  Uploady, { useBatchStartListener } from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";

const MyUploadButton = () => {   
    useBatchStartListener((batch) => {
        return (batch.items.length <= 10);  
    });

    return <UploadButton/>;
};

const App = () => (<Uploady
    destination={{ url: "https://my-server/upload" }}>
    <DivUploadButton/>
</Uploady>);

进入全屏模式 退出全屏模式

显示上传预览

使用上传预览组件:

import React from "react";
import Uploady from "@rpldy/uploady";
import UploadButton from "@rpldy/upload-button";
import UploadPreview from "@rpldy/upload-preview";

export const App = () => (
     <Uploady>
      <UploadButton />

       <UploadPreview
            fallbackUrl="https://icon-library.net/images/image-placeholder-icon/image-placeholder-icon-6.jpg"/>
    </Uploady>
);

进入全屏模式 退出全屏模式

这些例子只是触及了 react-uploady 潜力的表面。

在指南部分或 RU 的故事书中有一些更高级的示例。

希望这种快速体验能让您在下次发现自己构建具有文件上传功能的 React 应用程序时尝试一下。