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

需求

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

实现难点

有以下记录点可以作为参考

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

思路分析

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

实现

实现该需求可以分为以下4步

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

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. 小程序现在还没有配置域名，后续需要将配置直传的链接

往期精彩回顾

• Ant Design 组件 —— Form表单（一)
• Ant Design 组件 —— Form表单（二)
• CMS管理后台入门指南 (Ant Design Pro v2.0)
• 实现点击下载文件的几种方法
• 在https中引入http资源所导致的问题

---

广州芦苇科技web前端