This article introduces the methods of setting up the camera, displaying pictures locally, uploading and downloading pictures in WeChat development

1. Configuration

After the page is introduced and authorized through jssdk, the wx object is passed in. First configure the required Interface

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

2. Call up the photo/album

and use the following method Place it in the callback function that requires a click event

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')
???}
});

##At this time we can see this effect, It means the transfer was successful! In the successful callback of the chooseImage method, I assign the selected photo to the src of the img that needs to be displayed (because I only have one photo here. If there are multiple photos, just use a loop assignment). In this way, I can directly display the photo I just took. /The selected photo in the album

3. Upload the photo

In the success callback of chooseImage above, you can see me The uploadToWeixinServer method is called, and the parameter is the Id of the local photo

uploadToWeixinServer:?1

After calling the uploadImage interface, the picture is uploaded to the WeChat server and the picture is returned. At this time, you need to use ajax to asynchronously upload it to your own server and call the "Get temporary material" interface provided by WeChat. Of course, it is not necessarily necessary to upload the photos immediately after selecting them. It must be based on actual business needs. There are also silent uploads (no progress prompts), or uploading together when the form is finally submitted.

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;
????????}

Here I use a UUID to generate a primary key rule and define the image name through type + timestamp + unique string. If the upload is successful, the image address of its own server will be returned to the front end.

getInputStream

Call the temporary material interface provided by WeChat to download the image still on the WeChat server. The parameter is the media file ID submitted by the front end, and finally convert the file For the input stream object

/**
?????*?根據(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;??
??
????}

service

parses the stream object through a loop and converts the file Write to your own server

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");
????????????????}??
????????????}??
????????}??
????}

##

The above is the detailed content of Methods for WeChat development to activate the camera, display pictures locally, upload and download pictures. For more information, please follow other related articles on the PHP Chinese website!