reactjs - 如何在快递服务器中使用反应组件
问题描述
我正在尝试让一些人将文件上传到我的快速后端,但此页面的表单位于反应组件中。我如何ConverterSec2
在我的get
函数中使用我的反应组件?
server.js:
import ConverterSec2 from "./ihertz_website/src/pages/Converter/ConverterSec2"
const express = require('express')
const app = express();
const port = process.env.PORT || 5000;
//console.log that your server is up and running
app.listen(port, () => console.log('Listening to port 5000'));
//create GET route
app.get('/express_backend', (req, res) => {
res.sendFile(__dirname + { ConverterSec2 }) //error
});
转换器Sec2:
import React, { Component } from "react"
import "../Converter/Converter.css"
class ConverterSec2 extends Component {
render() {
return (
<div className="sec2">
<form method="POST" action="/" encType="multipart/form-data">
<input type="file" name="file"/>
<input type="submit" value="Upload"/>
</form>
</div>
)
}
}
export default ConverterSec2
解决方案
您需要在 package.json 的末尾添加一个代理,如下所示:
{
"name": "some name",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"serve": "firebase emulators:start --only hosting,firestore"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000"
}
然后在组件内的请求中,使用一个包,例如 axios 并执行以下操作:
axios.get('/express_backend')
推荐阅读
- php - 无法在 Laravel 迁移中创建外键
- javascript - Promise 没有按照它们被调用的顺序解决
- javascript - jQuery如何从字典中过滤两个日期和时间,并在新数组中分组
- android - 我可以将 Byte[] 值存储到 SQlite 数据库中吗?
- python - 通过 for 循环在多个数据帧上运行函数
- ruby - 如何在 Go 中进行正确的与 Git 兼容的 hex sha 打包/压缩
- apache-kafka - KafkaStreams KTable 压缩
- c# - 如何在 Aforge 播放器视频录制的同时录制音频?
- android - Flutter:从 Scaffold 主体处理抽屉状态
- google-cloud-platform - Datalab 无法读取 dataproc 上的 Bigquery 数据