React JS 中的文件拖放功能

react jsjavascript libraryfront end technology更新于 2025/11/19 11:56:17

拖放界面使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 />;
}