如何在文件浏览器中选择后显示文件名

Question

我在反应时遇到这个问题，当我点击 div 标签时我需要一个选项，我希望它显示文件浏览器（就像当你点击输入类型文件时）。然后当我 select 我想要的文件时，我需要将该文件名发送到导航栏并在那里显示它。有没有人有这种情况我真的需要帮助。这是我的上传页面代码：

import React, { useState } from "react";
import axios from "axios";
import Scan from "./pictures/scaner.png";
import Upload from "./pictures/fileUpload.png";
import config from "../data/config.json"

function ScanDocument() {
  const [file, setFile] = useState("");
  const [filename, setFilename] = useState("Choose File");
  const [uploadedFile, setUploadedFile] = useState();

  const onChange = (e) => {
    setFile(e.target.files[0]);
    setFilename(e.target.files[0].name);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append("file", file);

    try {
      const res = await axios.post(
        `${config.api_link}/files/upload`,formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );

      // Displays the name of file in the console. //
      console.log(res.data.name);

      const { fileName, filePath } = res.data;

      setUploadedFile({ fileName, filePath });

      alert("File uploaded successfully.");
    } catch (err) {
      if (err.response.status === 500) {
        alert("There was a problem with the server.");
      } else {
        alert(err.response.data.msg);
      }
    }
  };

  return (
    
    // <Div> that defines margines of page. //
    <div class="ml-5 mr-5 sm:mt-36 md:mt-32 lg:mt-5 xl:mt-2 2xl:mt-0">
      
      {/* <Div> that divides page on two sides. Side for uploading a file and side for scaning a file with a device. */}
      <div class="grid grid-cols-2 sm:gap-2 md:gap-5 lg:gap-8 items-center justify-center">
        
        {/* First <div> with a picture, in which we scan files using required device. */}
        <div class="border-2 border-dashed border-gray-500 hover:bg-gray-100 cursor-pointer">
          
          <div class="justify-center">
            <img
              src={Scan}
              className="mx-auto my-auto cursor-pointer "
              alt=""
            />
          </div>
          <div>
            <p class="text-center text-2xl font-sans pb-0.5">Scan Document</p>
          </div>
        </div>
        {/* End of file scanning <div>. */}

        {/* Second <div> in who we do the file selecting/uploading. */}
        <div class="border-2 border-dashed border-gray-500 hover:bg-gray-100 cursor-pointer">
          
          {/* Upload. */}
            <div>
              <img src={Upload} alt="" class="mx-auto" />
              <input type="file" id="customFile" />
            </div>
            <div>
              <p class="text-center text-2xl font-sans pb-0.5 ">
                Choose Document
              </p>
            </div>
          {/* End of upload. */}
          
        </div>
        {/* End of file uploading <div>. */}

      </div>
      {/* End of <div> that seperates page on two equal parts. */}
      
    </div>
    // End of <div> that defines margines and responsive view. //
  );
}

export default ScanDocument;

这是导航栏的代码：

import React from "react";
import Loaded from "../assets/loaded.png";

function Navbar() {
  return (
    // ->-> Absolute keeps navbar on one place, navbar doesn't follow the page with the mouse scrolling. <-<- //
    <div className="shadow-md w-full absolute">
      <div className="flex justify-end h-full w-full bg-white py-5 border-2 border-b-black">
        <div class="mr-5">
          <ul className="sm:w-fit md:w-fit lg:w-fit">
            <li className="text-xl">
              <img src={Loaded} className="h-8 w-8  cursor-pointer" alt="" />
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
}

export default Navbar;

Answer 1

最简单的方法是使用 react-dropzone 库。请检查以下 example.

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()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
}

<Basic />

你可以像下面那样在没有这个库的情况下制作这个 dropzone。

需要为选择文件的输入组件定义ref
点击dropzonediv时，可以执行input组件的点击。

Here 充满了这方面的代码。我会放一些核心代码片段。

example code

如何在文件浏览器中选择后显示文件名

How to display file name after selecting it in file browser

javascript

reactjs

file-upload

axios