微信公衆號經過圖片選取接口上傳到阿里oss

時間 2019-11-20

原文原文鏈接

前言

以前寫過一篇微信JS-SDK的使用方法，可進行參考
http://www.javashuo.com/article/p-ypfurcjs-ds.htmlhtml

配置並調用公衆號接口權限

一、配置權限微信公衆號接口，添加以下權限前端

jsApiList: [
          'chooseImage',
          'getLocalImgData',
        ]

二、拍照或選取圖片，拿到base64位圖片地址git

wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
      sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
      success: function (res) {
        // var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
        // 獲取本地圖片
        wx.getLocalImgData({
          localId: res.localIds[0], // 圖片的localID
          success: function (res) {
            var localData = res.localData; // localData是圖片的base64數據，能夠用img標籤顯示
          }
        });
      }
    });

這裏有個坑：
微信公衆號選擇圖片顯示報錯wx.getLocalImgData is not a functiongithub

調用以前需在jsApiList[]中添加getLocalImgData權限canvas

添加以後仍是沒法獲取權限，後發現微信js版本問題（在jweixin1.0.0沒法使用）瀏覽器

替換使用最新版本安全

http://res2.wx.qq.com/open/js/jweixin-1.4.0.js

使用阿里oss瀏覽器端sdk上傳圖片

3.一、文檔查看
https://www.alibabacloud.com/help/zh/doc-detail/32069.htm?spm=a2c63.p38356.a3.7.26855ac51uabIJ
https://github.com/ali-sdk/ali-oss服務器

3.二、瀏覽器引用微信

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-6.1.0.min.js"></script>

let client = new OSS({
            accessKeyId: result.AccessKeyId,
            accessKeySecret: result.AccessKeySecret,
            stsToken: result.SecurityToken,//安全性考慮，建議經過服務器獲取該token
            endpoint: '<oss endpoint>',
            bucket: '<Your bucket name>'
          });

//storeAs表示上傳的object name , file表示上傳的文件
          client.multipartUpload(storeAs, file).then(function (result) {
            console.log(result);
          }).catch(function (err) {
            console.log(err);
          });

multipartUpload第二個參數支持blob和file對象，這裏須要注意的是咱們在微信公衆號拿到的圖片地址是base64位，上傳以前將其轉換成blob或者file對象格式app

// base64轉blob
            function dataURLtoBlob(dataurl) {
              var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
              }
              return new Blob([u8arr], { type: mime });
            }

            //base64轉file對象
            function dataURLtoFile(dataurl, filename) {
              var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
              }
              return new File([u8arr], filename, { type: mime });
            }

坑：
如今最新sdk版本是6.1.0，能夠經過https://github.com/ali-sdk/ali-oss/tree/master/dist獲取，因爲是網上找的代碼，版本緣由
以前版本獲取oss對象的方式是new OSS.Wrapper ，最新版本已換成new OSS，傳遞參數也變了，region已經換成endpoint

let client = new OSS.Wrapper({
              region: 'oss-cn-hangzhou',
              accessKeyId: '',
              accessKeySecret: '',
              bucket: ''
            })

完整代碼

<img style="width:300px;" class="J_img" src="" alt="">
<div class="J_upload">上傳圖片</div>

// 圖片上傳
  $('.J_upload').click(function () {
    // 選擇手機圖片
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
      sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
      success: function (res) {
        // var localIds = res.localIds; // 返回選定照片的本地ID列表，localId能夠做爲img標籤的src屬性顯示圖片
        // 獲取本地圖片
        wx.getLocalImgData({
          localId: res.localIds[0], // 圖片的localID
          success: function (res) {
            var localData = res.localData; // localData是圖片的base64數據，能夠用img標籤顯示
            let client = new OSS({
              accessKeyId: '',
              accessKeySecret: '',
              // stsToken: result.SecurityToken,
              endpoint: '',
              bucket: ''
            });
            var fileName = "test/test.jpg"
            var _file = dataURLtoFile(localData, fileName);
            var _blob = dataURLtoBlob(localData);
            client.multipartUpload(fileName, _blob)
              .then(function (result) {
                $('.J_img').attr('src', 'https://diankr.oss-cn-beijing.aliyuncs.com/' + result.name+'?i='+Math.random());
              }).catch(function (err) {
                console.log('err', err);
              });

              // base64轉blob
            function dataURLtoBlob(dataurl) {
              var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
              }
              return new Blob([u8arr], { type: mime });
            }

            //base64轉file對象
            function dataURLtoFile(dataurl, filename) {
              var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
              while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
              }
              return new File([u8arr], filename, { type: mime });
            }
          }
        });
      }
    });
  })

最後

使用js在前端對base6四、file、Blob進行互相轉換

一、base6四、file對象互轉

https://www.cnblogs.com/MainActivity/p/8550895.html

function dataURLtoFile(dataurl, filename) {//將base64轉換爲文件
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, {type:mime});
}
//將圖片轉換爲Base64
function getImgToBase64(url,callback){
  var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.onload = function(){
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img,0,0);
    var dataURL = canvas.toDataURL('image/png');
    callback(dataURL);
    canvas = null;
  };
  img.src = url;
}
getImgToBase64('img/test.png',function(data){
　　　var myFile = dataURLtoFile(data,'testimgtestimgtestimg');
　　　console.log(myFile);
});

二、Base6四、 Blob互轉

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}

function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}