小程序图片上传七牛

开发准备

• 注册七牛云的账号， https://portal.qiniu.com/signup/choice
• 获得ACCESS_KEY、SECRET_KEY 

• 创建自己的存储空间，记录空间名(bucketname)、存储区域。

上传图片

一、需要后端根据ACCESS_KEY、SECRET_KEY 在服务器生成一个upToken给到前端

二、前端部分

• index.js
• qiniuUploader文件地址：https://github.com/gpake/qiniu-wxapp-sdk/blob/master/demo/qiniu-demo/utils/qiniuUploader.js

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

// 初始化七牛相关参数
function initQiniu() {
  var options = {
    region: 'NCN', // 华北区
    uptokenURL: 'https://[yourserver.com]/api/uptoken', //请求后端uptoken的url地址
    //uptoken: 'xxx',  //你请求后端的uptoken,和上面一样的，uptokenURL不填就找uptoken,填一个就可以了（这里是字符串数据不是url了）
    domain: 'http://[yourBucketId].bkt.clouddn.com', //yourBucketId:这个去你域名配置那里要
    shouldUseQiniuFileName: false,
    //key: '' 
  };
  qiniuUploader.init(options);
}

//获取应用实例
var app = getApp()
Page({
  data: {
    imageObject: {}
  },
  //事件处理函数
  onLoad: function () {
    console.log('onLoad')
    var that = this;
  },
  didPressChooesImage: function() {
    var that = this;
    didPressChooesImage(that);
  },
    didCancelTask: function() {
      this.data.cancelTask()
    }
});

function didPressChooesImage(that) {
  initQiniu();
  // 微信 API 选文件
  wx.chooseImage({
      count: 1,
      success: function (res) {
        var filePath = res.tempFilePaths[0];
        // 交给七牛上传
        qiniuUploader.upload(filePath, (res) => {
          that.setData({
            'imageObject': res
          });
        }, (error) => {
          console.error('error: ' + JSON.stringify(error));
        },
        null,// 可以使用上述参数，或者使用 null 作为参数占位符
        (progress) => {
          console.log('上传进度', progress.progress)
            console.log('已经上传的数据长度', progress.totalBytesSent)
            console.log('预期需要上传的数据总长度', progress.totalBytesExpectedToSend)
        }, cancelTask => that.setData({cancelTask})
        );
      }
    })
}

上面代码初始化七牛更多相关参数

• imageArray：准备上传的图片临时地址数组。
• fileHead：自定义上传七牛文件名的头，为了区别上传文件，比如图片/视频/录音/其他，
• imgName：自定义上传七牛文件名，前端处理嘛，我就简单的通过截取临时路径（filePath ）的30-50位字符作为储存到七牛的文件名，即使你添加了两张相同的图片，小程序给你的临时路径也是不一样的，所以不会存在重名情况。
• domain：下载资源时用到。如果设置，在上传后的success里返回的res.ImageURL字段,是一个带http的直接可以访问的文件地址，否则需要自己拼接。
• key：最终储存到七牛的文件名，我这里的图片文件名=文件头(fileHead)+伪文件名(imgName)
• uploadURL：上传到七牛的那个存储区域，上传区域和上传区域代码一定要对应上。
• region：上传区域代码。
• shouldUseQiniuFileName:表示是否由七牛来定义上传文件名，如果是 true，则文件 key 由 qiniu 服务器分配 (全局去重)。默认是 false，也就是我们自己来定义。如果key设置了，优先级最高

• index.wxml

<!--index.wxml-->
<view class="main">
  <button bindtap='didPressChooesImage'>上传图片</button>
  <view class="image-container">
    <image class="image" src="{{imageObject.imageURL}}" mode="aspectFit"></image>
  </view>

  <view class="data">
    hash: <text>{{imageObject.hash}}

</text>
    key: <text>{{imageObject.key}}

</text>
    imageURL: <text>{{imageObject.imageURL}}</text>
  </view>
  <button bindtap='didCancelTask'>取消任务</button>
</view>

• index.css

/**index.wxss**/
text {
  word-break: break-all; 
}

.main {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 100rpx 0;
  box-sizing: border-box;
}

.image-container {
  background-color: #f2f2f2
}

.data {
  margin: 5px;
}

•  还有记得去小程序后台配置上传地址白名单（对应你选的存储区域，例如华北区，https://up-z1.qbox.me）

下载社区SDK， 

• https://github.com/gpake/qiniu-wxapp-sdk 这个是微信小程序前端demo ； 
• https://developer.qiniu.com/sdk#community-sdk，这个是社区的链接。