反应图像上传组件

问题描述 投票:2回答:2

我正在寻找提供以下大部分/全部功能的React图像上传组件:

  • 支持上传多张图片
  • 显示所选图像的缩略图/预览

在移动设备上,它应该允许访问相机,以便用户可以选择存储在设备上的图像,或者拍摄要上载的图像的照片。

此组件将用于React浏览器应用程序(与React本机应用程序相对)。

javascript reactjs
2个回答
1
投票

React Dropzone可能是你最好的选择。

它基于Dropzone,可以处理图像预览,从文件系统或从相机访问图像,以及一次多次上传。


0
投票

您可以使用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所要求的许多缺点和过多的样板。

© www.soinside.com 2019 - 2024. All rights reserved.