javascript - 如何从单独的前端 javascript 函数调用节点 js 函数
问题描述
我有一个节点 js 后端 (app.js),它连接到 html、css 和 javascript (script.js) 前端。
在我的 HTML 中,我有一个获取图像的表单,然后调用 script.js 中的函数。
Script.js 然后使用 ajax 和 jquery 上传文件,效果很好。
一旦完成,我希望它自动调用我在 app.js 中的一个函数,该函数调用一个 python 脚本。
此功能可自行运行,但我在连接文件上传和 python 脚本时遇到问题。现在,当我上传显示该应用程序未定义的图像时,我收到一个错误。如何在一个函数中同时调用这两个函数?
相关HTML:
<form id="form">
Select your image: <input type="file" name="myfile" id="myfile" accept="image/x-png,image/jpeg"><br/>
<input type="submit" value="Submit" class="getCodeButton"/>
</form>
<div id="status"></div>
相关节点js(app.js):
const express = require('express')
const bodyParser = require('body-parser')
const multer = require('multer')
const sharp = require('sharp')
const app = express()
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static('./public'))
app.use(express.static('./uploads/'))
app.get('/', (req, res)=>{
res.sendFile("index.html", { root: __dirname + "/public" })
})
const port = process.env.PORT || 8000
app.listen(port,
()=>console.log(`Server running on port ${port}`))
const upload = multer().single('myfile')
app.post('/upload', (req, res)=>{
upload(req, res, async function(err){
if( err|| req.file === undefined){
console.log(err)
res.send("error occured")
}else{
let fileName = "myfile.jpeg"
var image = await sharp(req.file.buffer)
.jpeg({
quality: 40,
}).toFile('./uploads/'+fileName)
.catch( err => { console.log('error: ', err) })
res.send(req.body)
}
})
})
app.get('/runPython1', (req, res) => {
var dataToSend;
const python = spawn('python', ['qr_vision.py', 'uploads/myfile.jpeg']);
python.stdout.on('data', function (data) {
console.log('Pipe data from python script ...');
dataToSend = data.toString();
});
python.on('close', (code) => {
console.log(`child process close all stdio with code ${code}`);
//console.log(dataToSend)
res.send(dataToSend)
});
})
相关的javascript(script.js):
document.getElementById('form').onsubmit = function(event){
event.preventDefault()
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("status").innerHTML = 'sent'+this.responseText+ xhttp.status;
}else{
document.getElementById("status").innerHTML = xhttp.status ;
}
}
xhttp.open("POST", "upload")
var formData = new FormData()
formData.append('myfile', document.getElementById('myfile').files[0])
xhttp.send(formData)
app.get('/runPython1', (req, res) => {
console.log(res.result)
});
}
解决方案
你可以通过几种方式做到这一点
- 从前端:编写另一个 XMLHttpRequest 来调用 runPython1 端点,并在上传完成后发送请求。
- 从 nodejs 后端:您可以将它作为函数并在上传完成后调用它,而不是将 runPython1 公开为 api 端点。
app.post('/upload', (req, res)=>{
upload(req, res, async function(err){
if( err|| req.file === undefined){
console.log(err)
res.send("error occured")
}else{
let fileName = "myfile.jpeg"
var image = await sharp(req.file.buffer)
.jpeg({
quality: 40,
}).toFile('./uploads/'+fileName)
.catch( err => { console.log('error: ', err) })
runPython1(res);
}
})
})
const runPython1 = (res) => {
var dataToSend;
const python = spawn('python', ['qr_vision.py', 'uploads/myfile.jpeg']);
python.stdout.on('data', function (data) {
console.log('Pipe data from python script ...');
dataToSend = data.toString();
});
python.on('close', (code) => {
console.log(`child process close all stdio with code ${code}`);
//console.log(dataToSend)
res.send(dataToSend)
});
}
- 上传完成后,您还可以重定向到 runPython1 端点。请参阅此站点以进行重定向
推荐阅读
- sql - 替换包含表中列的任何结果的字符串的一部分
- c++ - 从头文件中包含 SFML/Graphics.hpp 时“没有这样的文件或目录”
- mysql - 想要在最短的时间内使用 excel 表中的值更新 MySQL DB
- c# - Telerik RadGrid SelectionChanging 事件离开部分选定行
- laravel - Eloquent:在模型和迁移中定义关系之间的区别
- r - R: ggplot2 以英里为单位的比例尺
- sql-server - SQL Server - 在 SSMS 中关闭查询窗口后,全局范围的临时过程立即消失
- spring - emq 和 Spring AMQP
- reactjs - Reactjs 从同一目录导入
- reactjs - props 更改时刷新 React-Native FlatList - 使用 redux 管理状态