文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在react应用程序中通过点击按钮将文件上传到服务器？

问如何在react应用程序中通过点击按钮将文件上传到服务器？
EN

Stack Overflow用户

提问于 2020-05-15 03:22:32

回答 1查看 65关注 0票数 0

我已经构建了一个react应用程序，其中我在首页渲染主页。现在我想在导航栏中嵌入一个文件上传功能。所以我在public/index.html中添加了这个按钮。我有一个服务器和一个客户端。服务器在localhost:8000上运行。现在，如果我想要将一个文件上传到服务器中的特定路径，假设服务器中有一个名为'example- file‘的文件夹。我如何才能做到这一点？任何帮助都将不胜感激。附加索引文件和我的项目结构屏幕截图。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/fevicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>Config Genrator</title>
  </head>
  <body class="d-flex flex-column min-vh-100 bg-light">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <nav
      class="navbar navbar-light"
      style="width: 100%;background-image: linear-gradient(to right,White,#333);"
    >
      <a class="navbar-brand" href="#">
        <img
          src="%PUBLIC_URL%/logo.png"
          width="162"
          height="39"
          class="d-inline-block align-top"
          alt=""
        />
      </a>
      <span class="navbar-brand text-white">
        Configuration Genrator
      </span>
      <input type="button" class="fas fa-file-upload" id="btnFileUpload" value="Upload File" />


    </nav>
    <div
      id="root"
      class="d-inline-flex align-self-center"
      style="width: 90%;"
    ></div>
    <footer style="width: 60%;" class="d-inline-flex align-self-center mt-auto">
      <p class="text-center" style="width: 100%;">©2020 </p>
    </footer>
  </body>
</html>

javascript

html

node.js

reactjs

回答 1

Stack Overflow用户

发布于 2020-05-15 04:20:43

尝试使用multer节点模块它可以帮助您将文件上传到服务器的特定路径

以下是您可以查看如何使用它的链接：- Resource for multer或File upload with multer

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61805754

复制

相似问题

问如何在react应用程序中通过点击按钮将文件上传到服务器？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react应用程序中通过点击按钮将文件上传到服务器？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在react应用程序中通过点击按钮将文件上传到服务器？
EN