在開發微信企業號辦公系統中,涉及到了圖片上傳功能,一開始使用的flash插件上傳方法,在蘋果手機上可以調用相機直接拍攝照片,但在安卓手機上只能選擇照片。
微信jssdk-api帶有一套完整的調用選擇本地圖片上傳的功能,很多朋友在問到多圖上傳的問題。在這里分享一下自己的做法,其實並不是自己的做法,就是完全按照微信開發文檔的做法,很多朋友可能沒有仔細看文檔,或者文檔內容太多所以不想看,然后就不知道做法了,我這里掛出來,是這樣做的
var images = {
localId: [],
serverId: []
};
document.querySelector('#chooseImage').onclick = function () {
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
alert('已選擇 ' + res.localIds.length + ' 張圖片');
}
});
};
// 5.2 圖片預覽
document.querySelector('#previewImage').onclick = function () {
wx.previewImage({
current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
urls: [
'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
]
});
};
// 5.3 上傳圖片
document.querySelector('#uploadImage').onclick = function () {
if (images.localId.length == 0) {
alert('請先使用 chooseImage 接口選擇圖片');
return;
}
var i = 0, length = images.localId.length;
images.serverId = [];
function upload() {
wx.uploadImage({
localId: images.localId[i],
success: function (res) {
i++;
//alert('已上傳:' + i + '/' + length);
images.serverId.push(res.serverId);
if (i < length) {
upload();
}
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
upload(); /*********************多張圖片,這里上傳使用的是遞歸******************************/
};
// 5.4 下載圖片
document.querySelector('#downloadImage').onclick = function () {
if (images.serverId.length === 0) {
alert('請先使用 uploadImage 上傳圖片');
return;
}
var i = 0, length = images.serverId.length;
images.localId = [];
function download() {
wx.downloadImage({
serverId: images.serverId[i],
success: function (res) {
i++;
alert('已下載:' + i + '/' + length);
images.localId.push(res.localId);
if (i < length) {
download();
}
}
});
}
download(); /*********************多張圖片,這里下載使用的是遞歸******************************/
};
多圖上傳或者下載都是使用的遞歸方法,在android或者IOS中都是行得通的(在這里多說一句,有些接口,Android行得通,IOS卻不行;IOS可以的,Android可能又會有問題,當然這只是極個別現象,用多了就會發現)。
這些接口都是需要配合着圖片選擇來用的哦
