我正在寻找提供以下大部分/全部功能的React图像上传组件:
在移动设备上,它应该允许访问相机,以便用户可以选择存储在设备上的图像,或者拍摄要上载的图像的照片。
此组件将用于React浏览器应用程序(与React本机应用程序相对)。
React Dropzone可能是你最好的选择。
它基于Dropzone,可以处理图像预览,从文件系统或从相机访问图像,以及一次多次上传。
您可以使用React Dropzone Uploader,它可以为您提供开箱即用的文件预览(包括图像缩略图),还可以为您处理上传。
import 'react-dropzone-uploader/dist/styles.css'
import Dropzone from 'react-dropzone-uploader'
const Uploader = () => {
return (
<Dropzone
getUploadParams={() => ({ url: 'https://httpbin.org/post' })} // specify upload params and url for your files
onChangeStatus={({ meta, file }, status) => { console.log(status, meta, file) }}
onSubmit={(files) => { console.log(files.map(f => f.meta)) }}
accept="image/*,audio/*,video/*"
/>
)
}
上传有进度指示器,可以取消或重新启动。用户界面完全可以自定义。
完全披露:我写了这个库来解决React Dropzone所要求的许多缺点和过多的样板。