本文介紹微信開(kāi)發(fā)之調(diào)起相機(jī)、本地展示圖片、上傳下載圖片方法

1.配置

頁(yè)面引入透過(guò)jssdk授權(quán)後，傳入wx對(duì)象，先配置需要的介面

wx.config({????/*?debug:?true,??*/
????appId:?appid,?
????timestamp:?timestamp,?
????nonceStr:?nonceStr,?
????signature:?signature,
????jsApiList:?[
?????????'chooseImage',//拍照或從手機(jī)相冊(cè)中選圖接口
?????????'previewImage',//預(yù)覽圖片接口
?????????'uploadImage',//上傳圖片接口
?????????'downloadImage'//下載圖片接口
?　　]
?});

?

2.調(diào)起拍照/相簿

將下面的方法放在需要點(diǎn)選事件的回呼函數(shù)裡面?

wx.chooseImage({
????count:?1,?
????sizeType:?['compressed'],?
????sourceType:?['album',?'camera'],?
????success:?function?(res)?{
　　　　//var?localIds?=?res.localIds;
????　?$('.driver-card?img').prop('src',res.localIds[0]);
????　?uploadPhoto.uploadToWeixinServer(res.localIds[0],'car')
???}
});

#?

這時(shí)我們可以看到這樣的效果，代表調(diào)起成功了！ chooseImage方法的成功回調(diào)裡，我將選取的照片賦值給需要顯示的img的src（因?yàn)槲疫@裡只有一張照片，如果有多張用循環(huán)賦值即可），這樣一來(lái)，就可以直接顯示剛拍照/相簿裡選取的照片了

?

#3.上傳照片

在上面chooseImage的success回呼裡面，可以看到我呼叫了uploadToWeixinServer方法，參數(shù)為本機(jī)照片的Id

uploadToWeixinServer:?1

呼叫uploadImage介面後，將圖片上傳到了微信伺服器，返回圖片的ID，這個(gè)時(shí)候需要用ajax非同步上傳到自己的伺服器裡，呼叫微信提供的「取得臨時(shí)素材」介面。當(dāng)然也不一定是選擇完照片就立即上傳，還得根據(jù)實(shí)際業(yè)務(wù)需求出發(fā)，也有是靜默上傳（沒(méi)有進(jìn)度提示），也有是在最終提交表單時(shí)一起上傳

js:

uploadToOwnerServer:?function(serverId,type){
????????????$.ajax({
????????????????data:?{serverId:serverId,type:type},
????????????????type?:?"POST",
????????????????url?:?WX_ROOT?+?"wechat/uploadPhoto",
????????????????success?:?function(json)?{????????????????????if?(json)?{????????????????????????var?data?=?JSON.parse(json.data);????????????????????????if?('car'?==?type)?
????????????????????????????uploadPhoto.options.carImage?=?data.path?+?data.name????????????????????????else
????????????????????????????uploadPhoto.options.idCardImage?=?data.path?+?data.name
????????????????????????
????????????????????}
????????????????}
????????????});
????????},

?

#Controller

@RequestMapping(value?=?"/uploadPhoto",?method?=?RequestMethod.POST)????public?@ResponseBody?HttpResult?uploadPhoto(@RequestParam?String?serverId,@RequestParam?String?type)?throws?Exception{
????????LOGGER.info("RestFul?of?uploadPhoto?parameters?serverId:{},type:{}",serverId,type);????????
????????try?{????????????/**?將圖片保存到本地服務(wù)器?**/
????????????String?photoName?=?type?+?new?Date().getTime()?+?UUID.randomUUID().toString();????????????
????????????//文件路徑不存在則創(chuàng)建
????????????File?saveFile?=?new?File(PIC_PATH?+?type);????????????if?(!saveFile.mkdir())?saveFile.mkdir();
????????????
????????????wechatService.saveImageToDisk(serverId,?photoName,?PIC_PATH?+?type?+?"/");
????????????LOGGER.info("Download?the?picture?from?weixin?server?pathL:{}",PIC_PATH?+?type?+?"/");
????????????JSONObject?data?=?new?JSONObject();
????????????data.put("name",?type?+?"/"?+?photoName+".jpg");
????????????data.put("path",?PIC_SERVER?+?"/");
????????????
????????????HttpResult?rs?=?new?HttpResult();
????????????rs.setCode(200);
????????????rs.setData(data.toJSONString());
????????????LOGGER.info("Download?the?picture?from?weixin?server?is?successful!serverId:{},photoName:{}",serverId,photoName);
????????????LOGGER.info("HttpResult?data:{}",rs.getData());????????????return?rs;
????????}?catch?(Exception?e)?{
????????????LOGGER.error("Download?the?picture?from?weixin?server?is?error",serverId);????????????return?null;
????????}

這裡我使用了一個(gè)UUID產(chǎn)生主鍵規(guī)則，透過(guò)型別+時(shí)間戳+唯一字串定義圖片名稱。如果上傳成功，同時(shí)又將自己伺服器的圖片位址回傳給前端。

?

呼叫微信提供的取得臨時(shí)素材介面下載還在微信伺服器上的圖片，參數(shù)為前端提交上來(lái)的媒體檔案ID，最終將檔案轉(zhuǎn)化為輸入流對(duì)象

/**
?????*?根據(jù)文件id下載文件?
?????*?@param?accessToken
?????*?@param?mediaId?
?????*?@return?文件流對(duì)象?????*/
????public?InputStream?getInputStream(String?accessToken,?String?mediaId)?{??
????????InputStream?is?=?null;??
????????String?url?=?"http://ipnx.cn/"+?accessToken?+?"&media_id="?+?mediaId;??
????????try?{??
????????????URL?urlGet?=?new?URL(url);??
????????????HttpURLConnection?http?=?(HttpURLConnection)?urlGet.openConnection();??
????????????http.setRequestMethod("GET");?//?必須是get方式請(qǐng)求??
????????????http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");??
????????????http.setDoOutput(true);??
????????????http.setDoInput(true);??
????????????System.setProperty("sun.net.client.defaultConnectTimeout",?"30000");//?連接超時(shí)30秒??
????????????System.setProperty("sun.net.client.defaultReadTimeout",?"30000");?//?讀取超時(shí)30秒??????????????http.connect();??
????????????//?獲取文件轉(zhuǎn)化為byte流??
????????????is?=?http.getInputStream();??
????????}?catch?(Exception?e)?{??
????????????LOGGER.error("Failed?to?convert?inputStream?from?weixin?server,accessToken:{},mediaId:{}",accessToken,mediaId);
????????}??
????????return?is;??
??
????}

#?

透過(guò)循環(huán)解析流對(duì)象，將文件寫入自己的伺服器

public?void?saveImageToDisk(String?mediaId,?String?picName,?String?picPath)?throws?Exception?{??
????????String?accessToken?=?getBaseAccessToken();
????????InputStream?inputStream?=?getInputStream(accessToken,?mediaId);?
????????
????????//?循環(huán)取出流中的數(shù)據(jù)
????????byte[]?data?=?new?byte[1024];??
????????int?len?=?0;??
????????FileOutputStream?fileOutputStream?=?null;??
????????try?{??
????????????fileOutputStream?=?new?FileOutputStream(picPath+picName+".jpg");??
????????????while?((len?=?inputStream.read(data))?!=?-1)?{??
????????????????fileOutputStream.write(data,?0,?len);??
????????????}??
????????????LOGGER.info("Write?the?fileInputStream?is?successful");
????????}?catch?(IOException?e)?{??
????????????LOGGER.error("Write?the?fileInputStream?is?error");
????????}?finally?{??
????????????if?(inputStream?!=?null)?{??
????????????????try?{??
????????????????????inputStream.close();??
????????????????}?catch?(IOException?e)?{??
????????????????????LOGGER.error("Close?the?fileInputStream?is?error");
????????????????}??
????????????}??
????????????if?(fileOutputStream?!=?null)?{??
????????????????try?{??
????????????????????fileOutputStream.close();??
????????????????}?catch?(IOException?e)?{??
????????????????????LOGGER.error("Close?the?fileOutputStream?is?error");
????????????????}??
????????????}??
????????}??
????}

以上是微信開(kāi)發(fā)之調(diào)起相機(jī)、本地展示圖片、上傳下載圖片方法的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！