Question

我有2个文件，html和js。我用快递连接到服务器。在html文件中，我有一个表单，可以从用户那里获取信息，然后提交给服务器。从服务器将数据保存到mysql中。然后，我使用ajax从前端的mysql取回信息。一切正常，直到我让用户上传图像为止。所以我有文件上传表达来处理图像上传并将其保存在本地文件和mysql列图像上。

我被卡住了，如何从mysql文件中检索图像以及通过使用html文件中的ajax调用形式的所有信息？当我console.log注销尝试检索的图像时，看到“ {type：“ Buffer”，data：Array（0）}“，上面没有任何内容。我不知道出了什么问题。一切都可以帮助你们，谢谢。

htm file

    <div id = "formstyle" style="margin-left:100px" enctype = "multipart/form-data">
        <form id="seenform" action = "/submitseen" method = "POST" encType="multipart/form-data"> 
            <h2>I Have Seen A Pet</h2>

            <input id="address_seen" placeholder="Address" name="address">

            <label for="currentlocation">CurrentLocation</label>
            <input type="radio" id="current" name="checklocation" onclick="loadMapData()">
            <br>


            <input placeholder="Describe Pet" name="adescription">
            <br>
            <input placeholder="Date" name="date">
            <br>
            <input placeholder="Time" name="time">
            <br>
            <input placeholder="additional info" name="additional">
            <br>
            <!-- <label for="imageUpload" class="btn btn-primary">Upload an image</label> -->
            <input type="file" name="imageUp" id="image">     
            <button id="seenButton">Submit</button>
        </form>

        $('#missingsubmit').click(function (e) {
            e.preventDefault()


            $.ajax({
                url: 'loadedseen/',
                type: 'POST',
                dataType: 'json',
                success: (data) => {                
                    console.log(data[0].image); ?? TRY TO RETRIEVE IMAGE BACK> PROBLEM IS HERE. CONSOLE LOG AND SAW THIS "{type: "Buffer", data: Array(0)}" with nothing on it.
                }
            })
        })

javascript file

var express = require ('express');
var mysql = require('mysql');
var axios = require("axios");

const fileUpload = require('express-fileupload');
var app  = express();
var temp_lat; var temp_lng;
const bodyparser = require('body-parser')
app.use(express.static('./htmlfiles'))
app.use(bodyparser.urlencoded({extended: false}))
app.use(fileUpload());

var connection =  mysql.createConnection({

    host: '127.0.0.1',
    user: 'root',
    password: '',
    database: ''
})

// this gets called when submit button is clicked in the  FORM
app.post('/submitseen', function (req, res) {

    var daddress = req.body.address;
    var dlat; var dlngt; var imageName;

// WHERE I GET THE IMAGE UPLOADED
    let sampleFile = req.files.imageUp;
    sampleFile.mv(__dirname + "/uploads/fullsize/" + req.files.imageUp.name, function(err) {
   if (err)
        return res.status(500).send(err);
  });

  var ddescription = req.body.adescription;
   var ddate = req.body.date;
  var dtime = req.body.time;
  var dadditional = req.body.additional;
  var dimage = sampleFile.name; // GET THE IMAGE SAVE INTO THE DATABASE LATER


 //string version of our query 
 var sqlquery = "INSERT INTO `seenTable`(`lat`, `lngt`, `address`, `adescription`, `date`, `time`, `additional`, `image`) VALUES (" + dlat + "," + dlngt + ",'" + daddress + "','" + ddescription + "','" + ddate + "','" + dtime + "','" + dadditional +  "','" + dimage+ "')"


                // SENDS THE QUERY(INSERT INTO) TO THE DATABASE AND ADDS IT TO THE DATABASE
                connection.query(sqlquery, function (error, rows) {
                    if (error) {
                        console.log('Error in the querys')
                    }
                    else {
                        console.log('New -Seen Stray- post submitted to the database ')
                    }
                })
                res.status(204).send()

            })
    }
// WHERE THE AJAX IS CALLED TO GET THE DATA FROM SQL TO FRONT END
app.post('/loadedseen', function(req,res){
       // SENDS THE QUERY(SELECT) to the database. This returns all the data as {} 
    connection.query("SELECT * FROM seenTable", function(error,rows,fields){
        if(error){
            console.log('Error in the query')
        }
        else{
            console.log('successful query')
            res.status(201).json(rows); // Send it to the ajax/front end ('rows' contains all the database data)
        }
    })
})

无法使用Express和Ajax从后端到前端获取图像

0 个答案: