NodeJS--上传图片

使用multer实现图片上传

下载

npm i multer -S

引入

const multer = require("multer")
const path = require("path")

配置

//存储位置配置
var storage = multer.diskStorage({
    // 配置文件上传后存储的路径
    destination: function (req, file, cb) {
        // NodeJS的两个全局变量
        // console.log(__dirname);  //获取当前文件在服务器上的完整目录 
        // console.log(__filename); //获取当前文件在服务器上的完整路径 
        cb(null, path.join(__dirname,'public/upload'))
    },
    // 配置文件上传后存储的路径和文件名
    filename: function (req, file, cb) {
        cb(null, Date.now() + path.extname(file.originalname))
    }
})
var upload = multer({ 
  //文件大小数量限制
  limits:{
    //限制文件大小100kb
    fileSize: 100*1000,
    //限制文件数量
    files: 5
  },
  //存储位置配置
  storage: storage,
  //文件格式过滤
  fileFilter: function(req, file, cb){
        // 限制文件上传类型，仅可上传png格式图片
        if(file.mimetype == 'image/png' || file.mimetype == 'image/jpeg' || file.mimetype == 'image/gif'){
            cb(null, true)
        } else {
            cb(null, false)
        }
    }
})

在路由中使用

//upload.single('image'),接收单个文件数据，不能用于处理多文件上传
//('image') 中用于填写接收文件的 name 属性值，不一致则不接收
router.post("/product",upload.single("image"),(req,res)=>{
    //接收普通文本参数
    let {productName,price} = req.body;
    //接收上传文件数据
    let imgUrl = req.file.filename;
    let sql = "insert into product (productName,price,imgUrl) values (?,?,?)"
    conn.query(sql,[productName, price , imgUrl],(err,result)=>{
        if (err){
            console.log('增加失败');
            return;
        }
        let data;
        if (result.affectedRows === 1){
            data = {
                code: 0,
                msg: '添加成功'
            }
        }else{
            data = {
                code: 1,
                msg: '添加失败'
            }
        }
        res.send(data)
    })
})


let singleUpload = upload.single('singleFile');
//单个文件上传
router.post('/single',(req,res)=>{
    singleUpload(req,res,(err)=>{
        if(!!err){
            console.log(err.message)
            res.json({
                code: '2000',
                type:'single',
                originalname: '',
                msg: err.message
            })
            return;
        }
        if(!!req.file){
            res.json({
                code: '0000',
                type:'single',
                originalname: req.file.originalname,
                msg: ''
            })
        } else {
            res.json({
                code: '1000',
                type:'single',
                originalname: '',
                msg: ''
            })
        }
    });
});

let multerUpload = upload.array('multerFile');
//多个文件上传
router.post('/multer', (req,res)=>{
    multerUpload(req,res,(err)=>{
        if(!!err){
            res.json({
                code: '2000',
                type:'multer',
                fileList:[],
                msg: err.message
            });
        }
        let fileList = [];
        req.files.map((elem)=>{
            fileList.push({
                originalname: elem.originalname
            })
        });
        res.json({
            code: '0000',
            type:'multer',
            fileList:fileList,
            msg:''
        });
    });
});

前端

html

<div class="add">
        <p>商品名称： <input type="text" class="productName"></p>
        <p>商品价格： <input type="number" class="price" ></p>
        <!-- multiple: 允许同时上传多张图片 -->
        <!-- <p>商品图片： <input type="file" class="file" multiple="multiple"></p> -->
        <p>商品图片： <input type="file" class="file"></p>
        <p><button class="add-btn">添加商品</button></p>
</div>
<script src="js/axios.js"></script>
<script src="js/util.js"></script>
<script src="js/upload.js"></script>

js

// 新建表单数据对象，用来存储上传的文件及上传的其它数据
let param = new FormData()
 
$(".file").onchange = function(){
    //获取图片信息
    let file = this.files[0]
    //"image"为前后端约定vb的属性名
    param.append("image",file)
}
$(".add-btn").onclick = function(){
    let productName = $(".productName").value;
    let price = $(".price").value;
    param.append("productName",productName)
    param.append("price",price)
 
    axios.post("/product",param,{
        headers: {
            // 默认提交的类型
            // "content-type": "application/json"
            // 复杂的表单数据(只要上传文件，就必须是下面的类型)
            "content-type": "multipart/form-data"
        }
    })
    .then((res)=>{
        console.log(res.data);
    })
}