微信小程序上传图片至七牛

需求

• 上传图片到服务器，在不一样的设备上显示

实现难点

有如下记录点能够做为参考

• 常规思路解决问题时的不可行之处，好比实现过程当中的报错，踩坑等
• 实现需求时的思路卡壳位置

思路分析

1. wx.uploadFile(Object object)将本地资源上传到开发者服务器，客户端发起一个 HTTPS POST请求，注意该请求的对象为测试服，然后台搭建一个图片上传的服务器比较麻烦，所以选择使用方便的七牛云
2. 小程序的请求为https，所以与管理后台的图片上传有所区别，但实现方法本质是同样的
3. 如何使用七牛云的服务，查看官方文档，或者百度看别人的教程，下面是我在topshow这个项目中使用的方法

实现

实现该需求能够分为如下4步

1. 克隆 gpake/qiniu-wxapp-sdk 仓库: git clone github.com/gpake/qiniu…

2. 在 SDK 目录下找到 qiniuUploader.js 文件，在须要使用上传功能的页面引用 qiniuUploader.js 文件， 该方法四个参数，上传成功的回调函数返回了成功上传图片的连接

3. 获取七牛直传的token，调取后台接口文档七牛模块的前端使用接口，获取token和域名

   获取token的接口和上传七牛云的接口涉及到一个异步变同步操做的问题，所以引用了promise对象

4. 调七牛直传的接口，具体实现代码以下：

//app.js中 获取七牛直传的token，注意promise对象的使用
 fetchUptoken: function () {
        return new Promise(function(resolve, reject){
          wx.request({
            url: API.Qiniu.token,
            data: {},
            success: function(res){
              // success
              console.log(res.data.token)
             resolve(res)
            },
            fail: function() {
              // fail
            },
            complete: function() {
              // complete
            }
          })
        })
    },

//上传图片的page中
handleUploadImage: function () {
    const qiniuUploader = require("../../utils/qiniuUploader");
    let that = this;
    let {
      uploadPicture
    } = that.data
	// 经过微信的api选择图片，暂存到本地文件夹，而且经过路径名能够拿到该图片
    wx.chooseImage({
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'], 
      success: function (res) {
        let tempFilePaths = res.tempFilePaths; //选择了多张图片，但因为上传七牛云是单张上传，所以须要循环调接口，注意是调两个接口，获取直传token和七牛直传的接口
        tempFilePaths.map((r,i) => {
          app.fetchUptoken().then(function(res){ //异步变同步
            let uptoken = res.data.token
			//使用引入的qiniuUploader方法调七牛上传的接口
            qiniuUploader.upload(
			r, //上传的图片
			(res) => {  //回调 success
              console.log(res)
              uploadPicture.push(res.imageURL);
              that.setData({
                uploadPicture,
              })
              i == tempFilePaths.length - 1 && (
                that.uploadImage()
              )
            }, (error) => { //回调 fail
              console.log('error: ' + error);
            }, 
            { // 参数设置  地区代码 token domain 和直传的连接 注意七牛四个不一样地域的连接不同，我使用的是华南地区
              region: 'SCN',
              uptoken: uptoken,
              uploadURL: 'https://up-z2.qbox.me',
              domain: 'http://ovkzx61hi.bkt.clouddn.com/',
            })
          })
        })
      }
    })
  },

复制代码

5. 这样咱们就拿到图片在七牛云上的地址连接了 -- uploadPicture

备注

1. 以上的内容仅为前端的参考，后台是实现的部分包括直传token，和域名domain
2. 大概了解了一下这个domain是公司申请的
3. 小程序如今尚未配置域名，后续须要将配置直传的连接

• 做者简介：黄杰，芦苇科技web前端开发工程师 专一于前端领域框架、交互设计、图像绘制、数据分析等研究，访问 www.talkmoney.cn 了解更多