使用方法:

1.安装

安装 npm install multiparty --save

2.引入

引入 let multiparty = require('multiparty)

3.上传图片的地方的主要代码

var form = new multiparty.Form();

form.uploadDir='upload_img'; //上传图片保存的地址 目录必须存在 还需要注意配置静态文件托管

form.parse(req, function(err, fields, files) {

      //获取提交的数据以及图片上传成功返回的图片信息

      // console.log(fields);//获取表单的数据

      // console.log(files);//图片上传成功返回的信息

      res.writeHead(200, {'content-type': 'text/plain'});

      res.write('received upload:\n\n');

      res.end(util.inspect({fields: fields, files: files}));

});

4.html页面form表单加入 enctype="multipart/form-data"

<form action="/upload" enctype="multipart/form-data" method="post">

案例:

目录结构

Express---multiparty (图片上传+表单)

app.js

let express = require('express');
let app =new express();

let multiparty = require('multiparty');

// express.static托管静态文件
app.use(express.static('public'));

/**
 * 图片显示不出来(可配置虚拟托管静态文件)
 * upload_img\RZdCnWyxuY0E8dGHmdD1rSyI.jpg
 * 在upload_img这个路径下的upload_img目录中找
 */
app.use('/upload_img',express.static('upload_img'));

//获取表单提交的数据以及post提交过来的图片
app.post('/doProductAdd',(req,res) => {
    //获取表单提交的数据以及post提交过来的图片
    var form = new multiparty.Form();
 
    form.uploadDir='upload_img'; //上传图片保存的地址 目录必须存在
    form.parse(req, function(err, fields, files) {
        //获取提交的数据以及图片上传成功返回的图片信息
        // console.log(fields);//获取表单的数据
        // console.log(files);//图片上传成功返回的信息 
        let title = fields.title[0];
        let price = fields.price[0];
        let fee = fields.fee[0];
        let description = fields.description[0];

        let pic = files.pic[0].path;
        //添加
        //这里的Db.insert()方法是对操作数据库的封装,可直接操作数据库
        Db.insert('productmanage','product',{
            title:title,
            price:price,
            fee:fee,
            description:description,
            pic:pic
        },(err,data) => {
            if(err){
                res.send('上传失败!')
            }else{
                res.redirect('/product');//上传成功 跳转商品列表页
            }
        })
    });
})

打印出的 fields, files两个参数的数据信息

Express---multiparty (图片上传+表单) 

Express---multiparty (图片上传+表单)

效果

Express---multiparty (图片上传+表单)

Express---multiparty (图片上传+表单)

 

 

 

 

相关文章: