我希望能够在显示其他元素的同时使用 react-dropzone 全屏放置文件答案

【问题标题】：I want to be able to drop files in full screen with react-dropzone while displaying other elements我希望能够在显示其他元素的同时使用 react-dropzone 全屏放置文件
【发布时间】：2023-01-24 01:48:36
【问题描述】：

作为前端新手，关于 typescript 和 css 我不确定我是否理解正确。我想修改下面的代码，使所有屏幕都成为 dropzone，并添加在放置图像时预览图像的功能。下面的代码在 typescript 中使用了 react。它还使用 react-dropzone。

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

function App() {
  const [files, setFiles] = useState<(File & {preview:string})[]>([]);
  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} className="container mx-auto w-[600px] h-[400px]">
      <div>
        <img
          src={file.preview}
          onLoad={() => { URL.revokeObjectURL(file.preview) }}
          className="container mx-auto w-[600px] h-[300px] object-contain"
        />
        <input className="container mx-autobg-gray-200 rounded-xl border p-5 m-10" />
      </div>
    </div>
  ));

  useEffect(() => {
    // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
    return () => files.forEach(file => URL.revokeObjectURL(file.preview));
  }, []);

  return (
    <section className="container mx-auto relative">
        <div {...getRootProps({className: 'dropzone  mx-auto bg-gray-200 rounded-xl shadow border p-8 m-10'})}>
          <input {...getInputProps()} />
          <p>Drag 'n' drop some files here, or click to select files</p>
        </div>
      <aside className="absolute">
        {thumbs}
      </aside>
    </section>
  );
}

export default App;

【问题讨论】：

标签： reactjs typescript react-dropzone

【解决方案1】：

您可以在 div 上使用 onDrop 事件，例如：onDrop={(event) => onDropImage(event)} onDropImage 将是图像被删除后调用的函数，它可以这样实现：

async function onDropImage(e: React.DragEvent) {
    e.preventDefault();
    const img = e.dataTransfer.files[0];
}

要在屏幕上显示图像，您可以使用 FileReader，例如：

const fileReader = new FileReader();

fileReader.onload = function() {
      // url is the variable where you save the url of the generated image
      url = fileReader.result;
   }
fileReader.readAsDataURL(img);

该函数最后看起来像这样：

async function onDropImage(e: React.DragEvent) {
         e.preventDefault();
         const img = e.dataTransfer.files[0];
         const fileReader = new FileReader();

        fileReader.onload = function() {
            // url is the variable where you save the url of the generated image
            url = r.result;
        }
        fileReader.readAsDataURL(img);
}

【讨论】：