node上传图片到七牛云上更换头像

node怎么上传头像到七牛云然后更换头像，之前也做过这个小功能.
个人说说如何实现以及几个坑点.前端基于vue(基于什么都无所谓),后端node+express

前端代码

拿到图片流 发送到后端node

var file = e.target.files[0]
        // 判断是否图片
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
          return false
        }
// 主要利用 FileReader 对象 
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = (e) => {
          // e.target.result 就是要上传到后端的图片流 base64 
          // 一般情况下不会选择完图片就立刻请求上传接口
          // 有可能进行裁切，旋转等等操作 点击确定之后才将数据流上传到后端
        }

这里有个问题: 如果你想上传多张图片到后端 比如 files = [{img1:xx}, {img2: xx}] express 需要序列化之后才能接收到对象类型 => JSON.stringify(files)

创建七牛云存储

创建一个七牛云账号: 创建一个对象存储，不懂请百度...
新建存储空间: 一定要选择华东 不然后面会上传失败.
假设我创建了一个空间名为: avatar-img-d

后端代码:

下载七牛云模块
地址 https://github.com/node-modules/qn

 cnpm i qn -S

code

// 读写文件模块
var fs = require('fs');
// 七牛云模块
var qn = require('qn');
// 空间名
var bucket = 'avatar-img-d';
// 七牛云配置
var client = qn.create({
// 秘钥在控制模板->个人中心->密钥管理中可以看到
    accessKey: '填写你的秘钥',
    secretKey: '填写你的秘钥',
// 空间名
    bucket: bucket,
// 这个是你要生成的前缀（你的外链地址，可以在空间中查看）
// 其实写不写都行，不写后面也得写.
    origin: 'http://ouibvkb9c.bkt.clouddn.com'
})

如下图:

image.png

配置已经完成,写接口 用的是express， koa同理
主要做法是先接收前端的图片流 转换成图片写入本地image文件中，然后再存储到七牛云，再将本地生成的图片删除，需要新建一个image文件夹

// 上传图片
router.post('/upload', function (req, res, next) {
    // 接收前端图片数据流
    var imgData = req.body.imgData;
    // 构建图片名 这个主要是生成唯一图片名字利于存储 当然为了方便就写时间戳 实际开发可千万别 可能出现两人同一时间
    var fileName = Date.now() + '.png';
    // 构建图片路径 需要在上一层目录下新建一个image
    var filePath = './image/' + fileName;
    // 过滤data:URL
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
    var dataBuffer = new Buffer(base64Data, 'base64');
    fs.writeFile(filePath, dataBuffer, function (err) {
        if (err) {
 // 写入失败
            res.end(JSON.stringify({status: '102', msg: '文件写入失败'}));
        } else {
// 写入成功 上传七牛云 filePath 代表刚刚写入本地图片的路径
// {key: `/avatar/${fileName}`}    avatar 代表我要存在七牛云这个路径下 您随意 
// fileName 代表刚刚生成的文件名
            client.uploadFile(filePath, {key: `/avatar/${fileName}`}, function (err1, result) {
                if (err1) {
                    res.json({
                        status: '1',
                        msg: '上传失败'
                    });
                } else {
                    res.json({
                        status: '0',
                        result: {
                            path: result.url
                        },
                        msg: 'suc'
                    })
                }
                // 上传之后删除本地文件
                fs.unlinkSync(filePath);
            });
        }
    })
})

如下图:

image.png

大功告成，如此就将前端发送过来的图片流成功上传到七牛云上，最后再写一个更换头像路径的接口就好了.

源码前端项目地址: 戳我
源码node项目地址：戳我