反应 Droppzone 上传程序
React Droppzone上传器是一个自定义文件上传器,用于React.
说明: 这是从 福塔纳-co/反应-投放区加载器 并修改为导出.d.ts文件 而不是在 .tsx 文件上复制用于打字支持 .
特征
- 详细文件元数据和预览,特别是图像、视频和音频文件
- 上传状态和进度,上传取消并重新启动
- 容易设置认证信头和额外的上传字段( Q)参见 S3 示例(中文(简体) )
- 使用 CSS 或 JS 自定义样式
- 用组件注射道具全面控制渲染
- 控制上传生命周期
- 模块设计; 用作独立的空投区、 文件输入或文件上传器
- 跨浏览器支持,移动友好,包括从相机直接上传
- 轻而易举
- 优秀类型脚本定义
文档
https://react-dropzone-uploader.js.org 互联网档案馆的存檔,存档日期2013-12-22
安装
npm install --save react-dropzone-uploader
在您的应用程序中导入默认样式 .
import 'react-dropzone-uploader/dist/styles.css'
快速启动
RDU处理常见的用例,几乎没有配置. 以下的代码会给你一个可被点击的文件输入,可以接受图像,音频和视频文件. 它上传文件到 https://httpbin.org/post,并制作一个按钮以提交已完成上传的文件. 看看现场演示。 。 。 .
import 'react-dropzone-uploader/dist/styles.css'
import Dropzone from 'react-dropzone-uploader'
const MyUploader = () => {
// specify upload params and url for your files
const getUploadParams = ({ meta }) => { return { url: 'https://httpbin.org/post' } }
// called every time a file's `status` changes
const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) }
// receives array of files that are done uploading when submit button is clicked
const handleSubmit = (files) => { console.log(files.map(f => f.meta)) }
return (
<Dropzone
getUploadParams={getUploadParams}
onChangeStatus={handleChangeStatus}
onSubmit={handleSubmit}
accept="image/*,audio/*,video/*"
/>
)
}
实例
参见更多现场实例: https://react-dropzone-uploader.js.org/docs/examples 页面存档备份,存于互联网档案馆。 。 。 .
道具
检查出来 rDU道具的完整表格。 。 。 .
浏览器支持
| 颜色 | 火花 | 边缘 | 萨法里 | 独立 | iOS 萨法里 | 安卓的颜色 |
|---|---|---|---|---|---|---|
| ✔ | ✔ | ✔ | 10+, 9* 时间 | 第11条* | ✔ | ✔ |
* 要求 Promise 多填充,例如:. @ babel/ 填充
UMD 构建
该库作为ES模块可供使用 https://unpkg.com/react-dropzone-uploader@VERSION/dist/react-dropzone-uploader.umd.js (中文(简体) )。 。 。 .
如果您想要将其包含在页面中, 您也需要包含依赖和 CSS .
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.2/prop-types.min.js"></script>
<script src="https://unpkg.com/react-dropzone-uploader@VERSION/dist/react-dropzone-uploader.umd.js"></script>
<link rel"stylesheet" href="https://unpkg.com/react-dropzone-uploader@VERSION/dist/styles.css"></script>
捐款
有一些地方可以改进RDU; 看这里。 。 。 .
例如,RDU具有坚实的核心功能,但具有最小的外观和感觉. 它将更加方便初学者,具有更广泛的内置组件.
喊出声
感谢@nchen63的帮助 类型脚本分解来啊!
运行 Dev
克隆工程,安装依赖,运行dev服务器.
git clone git://github.com/fortana-co/react-dropzone-uploader.git
cd react-dropzone-uploader
yarn
npm run dev
此运行代码在 examples/src/index.js,它有许多实例可以使用 Dropzone。库源代码位于 /src 目录.
谢谢
感谢 react-dropzone, (中文(简体) ), react-select,以及 redux-form 给灵感.