在 React JS 中拖放文件功能

Z时代
2024-01-10
分类：综合

拖放界面使Web应用程序允许用户在网页上拖放文件。在本文中，我们将了解应用程序如何接受从底层平台的文件管理器中拖放到网页上的一个或多个文件。在这里，我们将使用react-dropzone包。让我们开始吧。

示例

首先，创建一个 React 项目 -

npx create-react-app newproject

转到项目目录 -

cd newproject

现在下载并安装react-dropzone包 -

npm i --save react-dropzone

我们将使用这个库在我们的 React 元素区域内添加一个可放置区域。这也用于添加文件选择区域。

在此示例中，我们将使用拖放功能在列表中添加文件名。在App.js中插入以下代码行-

import React from "react";
import { useDropzone } from "react-dropzone";
function Basic(props) {
   const { acceptedFiles, getRootProps, getInputProps } =
useDropzone();
   const files = acceptedFiles.map((file) => (
      <li key={file.path}>
         {file.path} - {file.size} bytes
      </li>
   ));
   return (
   <section className="container">
      <div {...getRootProps({ className: "dropzone" })}>
         <input
            {...getInputProps()}
            style={{ backgroundColor: "black", color: "white" }}
         />
         <br />
         <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
         <h4>Files</h4>
         <ul>{files}</ul>
      </aside>
      </section>
   );
}
export default App
function App() {
   return <Basic />;
}