react 使用 dropzone-ui

下载：yarn add dropzone-ui axios
参考链接
对于上传文件必须安装 dropzone-ui 和 axios

import { Dropzone, FileItem, FullScreenPreview } from "dropzone-ui";
import { nanoid } from 'nanoid'
import { useState } from "react";
export default function App () {const [files, setFiles] = useState([]);const [imageSrc, setImageSrc] = useState(undefined);const updateFiles = (incommingFiles) => {console.log("incomming files", incommingFiles);setFiles(incommingFiles);};const onDelete = (id) => {setFiles(files.filter((x) => x.id !== id));};const handleSee = (imageSource) => {setImageSrc(imageSource);};return (<DropzoneonChange={updateFiles}showFileNamesInPreview={false}showPreviews={false}value={files}maxFiles={10}maxFileSize={2998000}localization={"ES-es"}>{files.map((file, index) => (<FileItem{...file}key={nanoid()}showFileNamesInPreview={false}showPreviews={false}onDelete={onDelete}onSee={handleSee}localization={"ES-es"}previewinfohd/>))}<FullScreenPreviewimgSource={imageSrc}openImage={imageSrc}onClose={(e) => handleSee(undefined)}/></Dropzone>);
}

react 使用 dropzone-ui相关推荐

React 最好的 ui 组件库集锦
[转载]https://www.rails365.net/articles/react-zui-hao-de-ui-zu-jian-ku-ji-jin 这里有一篇讨论,说了哪个才是 React 最好的 ...
7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐
本文完整版:<7 款最棒的 React 移动端 UI 组件库 - 特别针对国内使用场景推荐> React 移动端 UI 组件库 1. Taro UI for React - 京东出品,多端 ...
React主流开源UI库分析（附优质管理端模板）
以下列举了一些React主流的开源UI库,希为某些所谓的大厂不要再重复造轮子,当然,确实有情怀笔者也为你点赞: 从Star及Fork数据来看,国内以Ant Design为主,国外以Material U ...
Scylla——开源免费的优秀代理 IP 池：自动验证、JSON API、基于 React 的 Web UI、Docker 支持...
GitHub:github.com/imWildCat/s- 中文文档:scylla.wildcat.io/zh/latest/ 自己是一个爬虫爱好者,有时候爬虫写的太过强大了被目标网站封了(笑).所 ...
react前端ui的使用_使用React Morph变形UI过渡
react前端ui的使用 Love them or hate them, animations in modern web design are probably here to stay. Unli ...
2-4、React+antd页面UI美化——登录界面设计
React+Antd 实现组件的UI美化示例目标UI 创建一个页面page,用于用户登录,要求页面简洁.美观.易懂要求有背景要求引入antd登录表单组件要求有登录样式,基于antd的表单对页面 ...
React as a UI Runtime(四、条件)
如果React在更新中只重用与元素类型相匹配的宿主实例,那按渲染条件选择的内容怎么办呢? 正如下面的代码,假如我们开始至需要一个input,但稍后需要在它之前渲染一个message : // 第一次渲 ...
React Ant Design UI 图片上传组件代码片段
用户可以上传图片并在列表中显示缩略图.当上传照片数到达限制后,上传按钮消失. import { Upload, Icon, Modal } from 'antd';class PicturesWall ...
React as a UI Runtime(五、列表)
通过比较树中的元素是否在同一位置,通常已经足够判断是否是重用还是再次创建通信组件了. 但是这只在子元素的位置是静止的并且不需要重排.在我们的上述的例子中,即使message不存在,我们仍然只带inpu ...
React学习21----React UI框架Antd(Ant Design)的基本使用
Ant Design 现在支持:react,angular,vue 3个框架官网地址: https://ant.design/index-cn 具体使用: 1.antd官网: https://ant ...

react 使用 dropzone-ui

react 使用 dropzone-ui相关推荐

最新文章

热门文章