javascript - 如何在反应应用程序中单击按钮将文件上传到服务器?
问题描述
我已经构建了一个反应应用程序,其中我在首页呈现主页。现在我想在导航栏中嵌入文件上传功能。所以我在 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>
解决方案
尝试使用multer node 模块,它可以帮助您将文件上传到服务器的特定路径
这是您可以检查如何使用它的链接:- multer 资源或使用 multer 上传文件
推荐阅读
- python - 在 Python 中通过 ElementTree 解析 xml 时如何保留命名空间
- ruby - Ruby Sinatra 的 HTTP PUT 请求
- speech-recognition - 微软自定义语音识别定价方案
- avro - Avro union:前向兼容性?
- excel - 由于非日期值过滤数据透视表 VB 错误
- reactjs - React Hooks with conditions
- sql-server - 在不删除所有行的情况下重置 IDENTITY 列
- spring - 192.168.0.3/v1 的 CORS 错误,但 192.168.0.3/v1/signup 没有
- ios - 在 PickerView IOS Swift 4.2 中从服务器加载数据
- php - 在我的 php 代码中不工作 session_start()