2021年3月4日星期四

How to call a node js function from a separate front end javascript function

I have a node js backend (app.js), which is connected to a html, css, and javascript (script.js) front end.

In my HTML I have a form that gets an image, which then calls a function in script.js.

Script.js then uploads the file using ajax and jquery, which works fine.

Once that's complete, I want it to automatically call a function I have in app.js that calls a python script.

This function works on its own, but I'm having problems connecting both the file upload and the python script. Right now I get an error when I upload the image that says that app is not defined. How can I call both of these in one function?

Relevant 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>  

Relevant node 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)      });     })  

Relevant 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)      });  }  
https://stackoverflow.com/questions/66486375/how-to-call-a-node-js-function-from-a-separate-front-end-javascript-function March 05, 2021 at 11:31AM

没有评论:

发表评论