mpvue+vant+node七牛云上传图片

前言

最近在用mpvue写小程序，用到了vant的ui库中的uploader文件上传的组件，官方实例中要自己写后台接口。七牛云提供了两种分别是客户端和服务器请求云端图片路径的方法，以下采用的是客户端发起请求的方法，但是token还是要通过后端接口得到。

图片上传需要经过以下几步：

1. 上传图片，获得事件中wx提供的图片路径
2. 注册七牛云账号
3. 后端通过accessKey和secretKey请求七牛云服务器，得到token返回给客户端
4. 客户端利用七牛的sdk请求七牛云服务器，上传wx图片路径并得到云端图片路径

一、uploader组件上传文件

<van-uploader :file-list="fileList" @afterRead="afterRead"  @delete="del_img" max-count=4/>
data () {
        return {
            token:'',
            filePath:'',
            fileList:[]
        }
} 

token由服务端拿到，filePath是临时路径，fileList绑定图片数组，after-read是文件读取完成后执行的回调

（如果没有出现以下情况可以忽略）

特别注意mpvue在使用vant的uploader组件的时候，会出现after-read回调函数失效的情况，这一现象在vant中用-连接的回调事件都会出现。那是因为-在使用中没法被mpvue编译，解决方法是到引入的vant文件源码中把after-read改成afterRead，如果是通过npm引入的的，到node_modules中的找到源码更改。如下

通过afterRead我们可以拿到wx给我们提供的临时路径，但还不能直接用,如（http://tmp/wx7895e9axxxxx.png）

afterRead(e){
    this.filePath = e.mp.detail.file.path;//拿到临时路径 			
    this.getToken();
},

二、注册七牛云创建一个空间

注册七牛云然后需要实名，并且创建一个对象存储空间，区域根据自己情况选择，创建后会有一个CDN测试域名后面要用到

三、后端Node.js请求token

七牛云个人中心—密钥管理得到Access Key和Secret Key，以及自己创建空间的名称

npm i qiniu
// 先npm下载到项目中
const qiniu = require(“qiniu”);
//引入的当前文件中

后端代码：

const express = require('express');
const router = express.Router();
const qiniu = require("qiniu");

router.get('/',(req,res) => {
    //客户端调用接口，生成token
    let accessKey = 'xxx';//你的accessKey
    let secretKey = 'xxx';//你的secretKey
    let mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
    let options = {
      scope: 'xxx' //创建空间的名称
    };
    let putPolicy = new qiniu.rs.PutPolicy(options);
    let uploadToken = putPolicy.uploadToken(mac);
    // console.log(uploadToken);
    res.send(uploadToken);
    //把uploadToken返回给客户端
});
module.exports = router;

前端代码：

getToken(){
   //自己封装的请求
   this.$https.request({
       url:this.$interfaces.getToken,
       method:"get"
   })
   .then(res => {
       this.token = res;//得到后端返回的token
       this.uploadImgToQiniu();
   })
}

四、客户端请求得到路径

七牛js_sdk

git clone git@github.com:gpake/qiniu-wxapp-sdk.git

拿到文件中的qiniuUploader.js，放入到项目中，并且引入到使用的vue文件中

const qiniuUploader = require("../../utils/qiniuUploader");

uploadImgToQiniu(){
    qiniuUploader.upload(this.filePath, (res) => {
        console.log(res);//拿到返回的res
        //这是我放入fileList的代码
        let obj = {};
        obj['url'] = 'http://' + res.fileUrl;
        this.fileList.push(obj);
        
        }, (error) => {
        	console.log('error: ' + error);
        }, {
	        region: 'SCN',//写自己的区域代码
	        domain: 'xxx.bkt.clouddn.com', //自己的cdn域名
        	uptoken: this.token, // 后端拿到的token
        }, (res) => {
            console.log('上传进度', res.progress)
            console.log('已经上传的数据长度', res.totalBytesSent)
            console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend)
        }, () => {
        // 取消上传
        }, () => {
        // `before` 上传前执行的操作
        }, (err) => {
        // `complete` 上传接受后执行的操作(无论成功还是失败都执行)
        });
}

把拿到的url放入到自己的fileList中，就完成了