小程序圖片上傳七牛

開發准備

• 注冊七牛雲的賬號， 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}}\n\n</text>
    key: <text>{{imageObject.key}}\n\n</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，這個是社區的鏈接。