nodejs图片的压缩上传和base64的上传接受显示
文章 1805 0 0 0
发布时间:2019年12月05日

概述

安装multer中间件和fs,formidable

npm i multer —save
npm i fs —save
npm i formidable —save

配置

const fs = require("fs");
const path = require('path');
const multer = require("multer");
//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件
var formidable = require('formidable'); //blod处理
//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
    //确定图片存储的位置
    destination: function(req, file, cb) {
        cb(null, '../demoimg/upload/img')
    },
    // 
    //确定图片存储时的名字,注意,如果使用原名,可能会造成再次上传同一张图片的时候的冲突
    filename: function(req, file, cb) {
        let md5s = md5(Date.now() + file.originalname)
        cb(null, md5s + '.png')
    }
});
//生成的专门处理上传的一个工具,可以传入storage、limits等配置

var upload = multer({
    storage: storage
});
const singleMidle = upload.single("files"); //一次处理一张
const arrMidle = upload.array("arrayFile", 5); //一次最多处理5张
const fieldsMidle = upload.fields([{
    name: "fieldSingleFile",
    maxCount: 1
},
{
      name: "fieldArrayFile",
       maxCount: 4
 }
]);

1.普通input file文件上传

form的submit还是ajax上传只是获取到inputfile的值传过去,使用此方法不能使用qs或者转成json的数据格式发送,要传二进制格式的数据所以你可以在ajax前端使用URLSearchParams来进行append(’name名称‘,file值)传递

router.post('/uploads', singleMidle, function(req, res, next) {
    //线上的也就是服务器中的图片的绝对地址
    var tmp_path = req.file.path;
    var target_path = 'uploads/' + req.file.path;
    fs.readFile(tmp_path, function(err, data) {
        fs.writeFile(target_path, data, function(err) {
            res.json({
                code: 200,
                data: target_path
            })
        })
    })
});

发送格式:

nodejs图片的压缩上传和base64的上传接受显示

2.base64位文件文件上传

base64的形式为”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0……”;当接收到上边的内容后,需要将data:image/png;base64,这段内容过滤掉,过滤成:“iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0…….”
;然后进行保存。

base64位图片地址后台接收解析一下即可拿到图片,不过这里会遇见图片损坏的问题,经过追梦猪研究发现这里的传递给后台的地址会发现缺少+号,用正则替换一下或者encodeURIComponent转一下即可

router.post('/upload', singleMidle, function(req, res, next) {
    //接收前台POST过来的base64
    var imgData = req.body.imgData;
    //过滤data:URL
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    var timestamp = Date.parse(new Date());
    var dataBuffer = Buffer.from(base64Data, 'base64');
    var name = timestamp.toString() + ".jpg"
    // 写入的地址
    fs.writeFile("./public/uploadimages/" + name, dataBuffer, function(err) {
        if (err) {
            res.send(err);
        } else {
            //  res.send("保存成功!");
            console.log()
            console.log("服务端接收到了数据啦");
        }
    })
});

发送格式:

nodejs图片的压缩上传和base64的上传接受显示

3.blod文件文件上传

跟fileinput上传类似,传的是blod对象

router.post('/uploadblod', function(req, res, next) {
    //接收前台POST过来的uploadblod
    var uploadDir = path.normalize(__dirname + '/' + "../index")
    var form = new formidable.IncomingForm();
    form.uploadDir = uploadDir;
    form.parse(req, function(err, fields, files) {
        console.log(files)
        console.log(files.file.path)
        if (err) {
            res.json({
                "result": '-1',
                "msg": '保存失败'
            })
            return
        }
        console.log(req)
        var oldpath = files.file.path;
        var newpath = oldpath + req.body.filetitle;
        console.log(newpath)
        //newpath:用于修改文件名,因为默认保存的文件是没有后缀的
        //未修改文件名时的例子:upload_7bd3302059acb15419974e2907b099fd
        fs.rename(oldpath, newpath, (err) => {
            //改变上传文件的存放位置和文件名
            if (err) {
                res.json({
                    "result": '-2',
                    "msg": '保存失败'
                })
                return
            }
            res.json({
                "result": '0',
                "msg": '保存成功'
            })
        })
    });
});
评论专区