如何从单独的前端 javascript 函数调用节点 js 函数

Question

我有一个 node 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)
    });
}

Answer 1

您可以通过多种方式做到这一点

1. 从前端：编写另一个 XMLHttpRequest 来调用 runPython1 端点，并在上传完成后发送请求。
2. 从 nodejs 后端：您可以将 runPython1 作为函数并在上传完成后调用它，而不是将 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)
    });
 
}

1. 上传完成后，您还可以重定向到 runPython1 端点。请参考This site 进行重定向