微信小程序向七牛云存储上传图片

【实例简介】

微信小程序向七牛云存储上传图片

【实例截图】

【核心代码】

/**
 * 功能: index.js 向七牛云存储上传图标例子
 * 作者: zhang******(微信)
 * 时间: 2017-06-03
 * 注意事项1: 测试的时候要选中微信开发工具中的:项目/开发环境不校验请求域名选项.(否则需要在微信小程序服务器上设置upload域名)
 * 注意事项2: 您的token搞不好,一定调不成功.
 */

//获取应用实例
var sourceType = [['camera'], ['album'], ['camera', 'album']]

var app = getApp()
Page({
  data: {
    imageObject: {}
  },
  //事件处理函数
  onLoad: function () {
    console.log('onLoad')
    var that = this;
  },
  didPressChooesImage: function () {
    var that = this;
    // 微信 API 选文件
    wx.chooseImage({
      sourceType: ['album', 'camera'], 
      count: 1,
      success: function (res) {
        // 本次手机操作的图片临时地址
        var filePath = res.tempFilePaths[0];

        // fileName 为上传七牛云存储后的远程文件名
        var fileName = Math.random().toString(36).substr(2);

        // 微信 API 上传文件
        /**
         * 参数说明:
         * url 为七牛云存储华南地区
         * token 由七牛提供工具生成:http://jsfiddle.net/gh/get/extjs/4.2/icattlecoder/jsfiddle/tree/master/uptoken?ref=developer.qiniu.com  其中:accessKey secretKey bucketName 要填写准确,申请的token1小时内有效. 如果正式上线需要程序接口生成token
         * fileName 为向七牛云存储保存的文件名
         * 访问图片域名: http://or0onmbqr.bkt.clouddn.com 需要使用自己注册账号中的正确域名
         */
        wx.uploadFile({
          url: 'https://up-z2.qbox.me',
          filePath: filePath,
          name: 'file',
          formData: {
            'token': 'gnVmJDQQTOKbPi5Z3eGc5fybMzH0BrFyoXXrN-MP:vPsH6sZsctbCGs_EK4QK7CXrVYM=:eyJzY29wZSI6ImdyZWVucGxhbiIsImRlYWRsaW5lIjoxNDk2NTk2Nzk3fQ==',
            key: fileName
          },
          success: function (res) {
            console.log(res.data);
            var dataString = res.data;
            var dataObject = JSON.parse(dataString);
            //do something
            var imageUrl = 'http://or0onmbqr.bkt.clouddn.com/' dataObject.key;
            dataObject.imageURL = imageUrl;
            that.setData({
              imageObject: dataObject
            })
            console.log(dataObject);
          },
          fail: function (error) {
            console.error(error);
          }
        })
      }
    }
    )
  }
});