微信公众号通过图片选取接口上传到阿里oss

配置并调用公众号接口权限

1、配置权限微信公众号接口，添加如下权限

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

2、拍照或选取图片，拿到base64位图片地址

wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片// 获取本地图片wx.getLocalImgData({localId: res.localIds[0], // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据，可以用img标签显示}});}});

这里有个坑：
微信公众号选择图片显示报错wx.getLocalImgData is not a function

调用之前需在jsApiList[]中添加getLocalImgData权限

添加之后还是无法获取权限，后发现微信js版本问题（在jweixin1.0.0无法使用）

替换使用最新版本

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

使用阿里oss浏览器端sdk上传图片

3.1、文档查看
https://www.alibabacloud.com/help/zh/doc-detail/32069.htm?spm=a2c63.p38356.a3.7.26855ac51uabIJ
https://github.com/ali-sdk/ali-oss

3.2、浏览器引用

<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,//安全性考虑，建议通过服务器获取该tokenendpoint: '<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对象格式

 // base64转blobfunction 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, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片// 获取本地图片wx.getLocalImgData({localId: res.localIds[0], // 图片的localIDsuccess: 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转blobfunction 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在前端对base64、file、Blob进行互相转换

1、base64、file对象互转

https://www.cnblogs.com/MainActivity/p/8550895.htmlfunction 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);
});

2、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 });
}function blobToDataURL(blob, callback) {let a = new FileReader();a.onload = function (e) { callback(e.target.result); }a.readAsDataURL(blob);
}

作者：fozero
文章出处：https://www.cnblogs.com/fozero
声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。