反应图像上传组件

Question

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

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

在移动设备上，它应允许访问相机，以便用户可以选择存储在设备上的图像，或拍摄要上传的图像。

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

Answer 1

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

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

Answer 2

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