时间戳

首页 > 解决方案 > 上传图片并使用express js读取json

javascript - 上传图片并使用express js读取json

问题描述

问题：尝试获取 json 字符串，但 post 数据处理程序中的 req.body 返回未定义。甚至可以在一个 post 请求中向服务器发送 json 和文件吗？

代码：

发送到服务器的数据：

function saveFile(e) {
    let info = {titleI: title.value, dirI: dir.value};
    let xhr = new XMLHttpRequest();
    let formData = new FormData();
    let file = e;     

    formData.append("info", JSON.stringify(info));   
    formData.append("file", file);

    xhr.onreadystatechange = state => { console.log(xhr.status); }
    xhr.timeout = 5000;
    xhr.open("POST", '/register'); 
    xhr.send(formData);

}

发布数据处理程序：

router.post("/", (req, res) => {

    console.log(req.body.info)

    var fstream;
    req.pipe(req.busboy);
    
    req.busboy.on('file', function (fieldname, file, filename) {

        let dirName = "a"
        
        fs.mkdir("D:/node website/ipgrabber/files/"+dirName+"/", function(err) {
            if (err) {
              console.log(err)
            }
        })

        fstream = fs.createWriteStream("D:/node website/ipgrabber/files/"+dirName+"/" + filename);
        file.pipe(fstream);

        fstream.on('close', function () {                
            res.redirect('back');
        });
    });
})

这是主要课程：

var express = require('express')
var http = require('http')

const mongoose = require('mongoose')
const { json } = require('express')
var cookieParser = require('cookie-parser')

var app = express()
var server = http.createServer(app)

const bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}));

var busboy = require('connect-busboy');
app.use(busboy()); 

//error handler
mongoose.connect('mongodb://localhost:27017/grabber', {useNewUrlParser: true, useUnifiedTopology: true});

app.use(cookieParser())

app.set("view engine", "ejs")

app.set('views', __dirname+'/views/html/');

app.use("/js", express.static(__dirname + "/views/js"))
app.use("/css", express.static(__dirname + "/views/css"))

const registerRoute = require("./routes/register")
const grabberRoute = require("./routes/grabber")

app.use("/register", registerRoute)
app.use("/id", grabberRoute)

app.get("/", (req, res) => {
    
    res.redirect("/register")
})


app.use(function (err, req, res, next) {
    res.status(400).send("Error code: 2 <hr> This page is currently inaccessible! <br> <a href='/'>GO TO HOMEPAGE</a>")

    console.log(err)
})

server.listen(80)

项目资源：

正文解析器 - 1.19.0

连接-busboy - 0.0.2

cookie 解析器 - 1.4.5

加密js 4.0.0

ejs 3.1.5

表达 4.17.1

猫鼬 5.11.19

标签： javascriptnode.jsexpress

解决方案

默认情况下，express 无法正确获取 multipart/form-data。您必须使用中间件来处理和解析此请求。我建议使用multer。

在您的情况下，您使用的是 connect-busboy，因此应按以下方式处理信息：

    req.busboy.on('field', function(key, value, keyTruncated, valueTruncated) {
        console.log('your info is here', key, value);
    });

推荐阅读