开发准备

• 注册七牛云的账号， 
• 获得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

     
       
      上传图片  
          
         
        
      
           hash: 
       
        {
   {imageObject.hash}}\n\n
           key: 
       
        {
   {imageObject.key}}\n\n
           imageURL: 
       
        {
   {imageObject.imageURL}}
         
        
      取消任务
     

• 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， 

•  这个是微信小程序前端demo ； 
• ，这个是社区的链接。