如何使用react-dropzone预览图像

npm install react-dropzone

yarn add react-dropzone

import React, { useState } from 'react';
import { useDropzone } from 'react-dropzone';

const MyDropzone = () => {
  const [files, setFiles] = useState([]);

  const { getRootProps, getInputProps } = useDropzone({
    accept: 'image/*',
    onDrop: (acceptedFiles) => {
      setFiles(
        acceptedFiles.map((file) =>
          Object.assign(file, {
            preview: URL.createObjectURL(file)
          })
        )
      );
    }
  });

  const thumbs = files.map((file) => (
    <div key={file.name}>
      <img src={file.preview} alt={file.name} />
    </div>
  ));

  return (
    <div>
      <div {...getRootProps()}>
        <input {...getInputProps()} />
        <p>拖放文件到此处，或点击选择文件上传。</p>
      </div>
      <div>{thumbs}</div>
    </div>
  );
};

export default MyDropzone;

import React from 'react';
import MyDropzone from './MyDropzone';

const App = () => {
  return (
    <div>
      <h1>文件上传</h1>
      <MyDropzone />
    </div>
  );
};

export default App;