base64上传图片并预览，NodeJs接收并保存

项目地址https://github.com/Fairfarren/mySth/tree/master/axiosUpload

获取图片

input改变时会触发一个方法，触发方法的时候回把本身传递过去，标签内部加了一个multile="true"属性，是可以多选的。

1	<input type="file" multiple="true" id="thisImg" name="thisImg" @change="selectedImg($event)">

首先获取图片对象，然后先通过循环的方式查看选中的文件的格式。最后通过FileReader()方法去将图片转成base64格式的。base64格式可以直接写在<img>标签内的src属性内

selectedImg(e) {
    this.img = [];
    //获取到图片对象
    const event = e.target.files || e.dataTransfer.files;
    //判断图片格式
    for(let i=0;i<event.length;i++){
        console.log(event[i].type);
        if(event[i].type != 'image/jpeg' && event[i].type != 'image/png' && event[i].type != 'image/jpg'){
            alert('选择的图片格式不正确，请选择“jpg，png，jpeg”格式');
            return;
        }
    }
    //图片格式转换
    for(let i=0;i<event.length;i++){
        const reader = new FileReader();
        reader.readAsDataURL(event[i]);
        //加载函数时将64位格式的图片输入到img里面
        reader.onload = (evt)=>{
            // console.log(evt.target.result)
            this.img.push( evt.target.result);
        }
    }
}

以上获取图片并且预览都算做好了，接下来是nodejs端的接收

接收图片并做保存

我是用的express直接生成的一个项目，设了一个路由叫/img，然后在这个路由下去设置

因为需要保存文件，所以需要加载fs模块

通过post去接收到axios传过来的值后，用正则进行过滤一下，然后通过Buffer()方法进行base64的保存

保存的时候我用了当前时间的秒来当做图片的名字，是什么格式的其实也可以定义的，只是传值得时候传过来

let express = require('express');
let router = express();
let fs = require('fs');
//获取路由
router.post('/',(req,res,next)=>{
    //接收前台POST过来的base64
    var imgData = req.body.hello;
    console.log(imgData);
    //过滤data:URL
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    var dataBuffer = new Buffer(base64Data, 'base64');
    let timeData = new Date();
    let time = timeData.getSeconds();
    fs.writeFile(`${time}.png`, dataBuffer, (err)=> {
        if(err){
          res.send(err);
        }else{
          res.send("保存成功！");
        }
    });
})
    
//输出出去
module.exports = router;

第一次写的时候接收到的base64一直报错，后来查询后发现是文件过大，需要做更改

app.js文件下

网上查询后有人说改动app.use(bodyParser.json({'limit':'30000kb'}));，有人说改动app.use(bodyParser.urlencoded({ 'limit':'30000kb' }));，但是我在改动前者后没有反应，索性都改了。

~~大概就是控制文件最大值吧，具体是什么我也不知道的~~ ；）

1 2	app.use(bodyParser.json({'limit':'30000kb'})); app.use(bodyParser.urlencoded({ 'limit':'30000kb' }));

获取图片

接收图片并做保存

获取图片