小程序上传图片到七牛，基于Thinkjs的服务端【原创，真正可用】

服务端用的是Thinkjs的，那么如何让小程序可以上传图片到七牛云？看了网上一些写的，有些问题，所以自己也来写一个，希望能帮助到别人。

准备工作：

从七牛云获取access_key、secret_key，创建bucket取得名字，获取domian

1. access_key、secret_key

   
   
   

   image

2、新建bucket

image

3、获取domian

image

如果自己有域名，还可以配置DNS中的CNAME，用一个二级域名来代替这个七牛随机分配的域名，这样更好记些。比如，我是pic.mydomain.com。这部分，七牛有教程，需要的自己在七牛里看。

好了，得到这些后，我们正式开始了。首先要在服务器端安装七牛SDK，用下面的命令，在命令行工具输入：

npm install qiniu

一、服务端的代码，作用就是取得token

const Base = require('./base.js');
const qiniu = require('qiniu');
module.exports = class extends Base {
    async getQiniuTokenAction() {
        let accessKey = '-2k5AtVgUQkuFYsdferzsdsdfsdfsgh';
        // 你自己的accessKey
        let secretKey = 'bJ5JBgRGPGIEtasdasdasdasfdgewrety';
        // 你自己的secretKey
        let bucket =  'yourbucket';
        // 你创建的七牛存储空间名
        let domain =  'http://icon.example.com/';
        // 你自己的bucket的domain
        let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
        let deadline = parseInt(new Date().getTime() / 1000) + 600;
        let options = {
            scope:bucket,
            deadline:deadline,
        };
        let putPolicy = new qiniu.rs.PutPolicy(options);
        let uploadToken=putPolicy.uploadToken(mac);
        let data = {
            token:uploadToken,
            domain:domain
        };
        return this.success(data);
    }
};

二、小程序端

首先，先去下载qiniuUploader.js，很重要，有篇博文就说明，要知道没有这个文件，是不可能上传成功的！下载地址：http://7xvilo.com1.z0.glb.clouddn.com/qiniu-wxapp-sdk-master.zip对了，下载解压后找到demo文件里的，不要用sdk文件夹里的。把qiniuUploader.js文件放在一个文件夹，然后引入。

1、小程序的js

var qiniu = require('../../../lib/qiniu/qiniuUploader.js');
Page({
    data: {
        uploadToken: '',
        domain: '',
        picUrls: []
    },
    onLoad: function () {
        this.getQiniuToken();
        // 载入时就去取token
    },
    getQiniuToken: function () {
        let that = this;
        let url = "http://localhost:8360/api/example/getQiniuToken"
        // 服务器的api地址，就是访问上面写的服务端代码里面的函数，当然具体地址：http://localhost:8360/api/example/ 这个要看你电脑的本地的，不要看我是这样，直接抄过去，哈哈
        wx.request({
            url: url,
            success: function (res) {
                let data = res.data.data;
                //都ok的话，data就得到了数据
                let token = data.token;
                let domain = data.domain;
                that.setData({
                    uploadToken: token,
                    domain: domain
                })
            }
        })

    },
    chooseImage: function (e) {
        var that = this;
        wx.chooseImage({
        // 微信提供的选择图片方法
            count: 4,
            // 上传数的限制，用手机上传选择相册时，会知道这个count的作用
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: function (res) {
                for (var index in res.tempFilePaths) {
                    // 这里写了个循环，这样可以选择多张图一起上传
                    var filePath = res.tempFilePaths[index];
                    qiniu.upload(filePath, (_res) => {
                    // 七牛提供的方法，引入那个文件的作用
                        var url = _res.imageURL;
                        that.data.picUrls.push(url)
                        that.setData({
                            picUrls: that.data.picUrls
                        });
                    }, (error) => {
                        console.log('error: ' + error);
                        // 这个很好用，调试时可以看七牛返回的错误
                    }, 
                    {
                        region: 'ECN',
                        domain: that.data.domain,
                        // getQiniuToken从服务器得来的domain
                        uptoken: that.data.uploadToken, 
                        // getQiniuToken从服务器得来的token
                    });
                }
            }
        })
    },
})

2、小程序wxml

image

2、小程序wxss

page {
    height: 100%;
    background: #f8f8f8;
}

.container {
    background-color: #f8f8f8;
    min-height: 100%;
    align-items: stretch;
    overflow-x: hidden;
}

.image-wrap {
    width: 100%;
    background: #fff;
    padding: 20rpx;
}

.add-photo {
    display: flex;
    flex-direction: row;
}

.add-photo .photo-wrap {
    width: 160rpx;
    height: 160rpx;
    margin-right: 20rpx;
    position: relative;
}

.add-photo .photo-wrap .photo {
    width: 160rpx;
    height: 160rpx;
}

.add-photo .btn-wrap {
    width: 120rpx;
    height: 120rpx;
    border: 1rpx dashed #ccc;
    background: #fbfbfb;
    display: flex;
    padding: 20rpx;
    justify-content: center;
    align-items: center;
}

.btn-wrap .photo-img {
    width: 52rpx;
    height: 52rpx;
    background: url(http://icon.meiweiyuxian.com/photo.png) no-repeat;
    background-size: 52rpx auto;
}

ok，下面是gif效果：

image

看看七牛是否有：

image

，搞定！

一些可能有用的地址：

七牛存储区域
https://developer.qiniu.com/kodo/manual/1671/region-endpoint
七牛SDK&工具
https://developer.qiniu.com/sdk#community-sdk
七牛Nodejs SDK
https://developer.qiniu.com/kodo/sdk/1289/nodejs

最后，介绍下：我是一个产品经理，辞职后开始卖海鲜，我花了点时间学了下编程，下面的小程序就是我自学写的，已经上线，有兴趣可以看看。

image

对了，我的微信：lookgxl