In diesem Artikel werden die Methoden zum Einrichten der Kamera, zum lokalen Anzeigen von Bildern sowie zum Hoch- und Herunterladen von Bildern in der WeChat-Entwicklung vorgestellt

1 Konfiguration

Nachdem die Seite über jssdk eingeführt und autorisiert wurde, Das WX-Objekt wird übergeben. Konfigurieren Sie zun?chst die erforderliche Schnittstelle

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

2. Aufruf ?ffnen Sie die Kamera/das Album

und ?ndern Sie Folgendes: Die Methode wird in die Rückruffunktion eingefügt, die ein Klickereignis erfordert

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

Zu diesem Zeitpunkt k?nnen wir sehen, dass ein solcher Effekt bedeutet, dass die Anpassung erfolgreich ist! Beim erfolgreichen Rückruf der Methode ChooseImage ordne ich das ausgew?hlte Foto dem SRC des anzuzeigenden Bildes zu (da ich hier nur ein Foto habe. Wenn es mehrere Fotos gibt, verwende einfach eine Schleifenzuweisung). , ich kann das gerade aufgenommene Foto direkt im Album anzeigen

3. Laden Sie das Foto hoch

Im Erfolgsrückruf von ChooseImage oben k?nnen Sie mich sehen. Die Methode uploadToWeixinServer wird aufgerufen und der Parameter ist die ID des lokalen Fotos

uploadToWeixinServer:?1

Nach dem Aufruf der uploadImage-Schnittstelle wird das Bild auf den WeChat-Server hochgeladen. Zu diesem Zeitpunkt müssen Sie Ajax verwenden, um es asynchron auf Ihren eigenen Server hochzuladen und ?Get“ aufzurufen ?Tempor?res Material“-Schnittstelle, bereitgestellt von WeChat. Natürlich ist es nicht unbedingt notwendig, die Fotos sofort nach der Auswahl hochzuladen. Es muss sich an den tats?chlichen Gesch?ftsanforderungen orientieren. Einige werden stillschweigend hochgeladen (ohne Fortschrittsaufforderungen), andere werden zusammen hochgeladen, wenn das Formular endgültig übermittelt wird

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

Hier habe ich eine UUID verwendet, um eine Prim?rschlüsselregel zu generieren, die den Bildnamen durch Typ + Zeitstempel + eindeutige Zeichenfolge definiert. Wenn der Upload erfolgreich ist, wird die Bildadresse des eigenen Servers an das Frontend zurückgegeben.

getInputStream

Rufen Sie die von WeChat bereitgestellte tempor?re Materialschnittstelle auf, um das Bild noch auf den WeChat-Server herunterzuladen. Der Parameter ist die vom Frontend übermittelte Mediendatei-ID. und schlie?lich die Datei für das Eingabestreamobjekt

/**
?????*?根據(jù)文件id下載文件?
?????*?@param?accessToken
?????*?@param?mediaId?
?????*?@return?文件流對象?????*/
????public?InputStream?getInputStream(String?accessToken,?String?mediaId)?{??
????????InputStream?is?=?null;??
????????String?url?=?"http://m.miracleart.cn/"+?accessToken?+?"&media_id="?+?mediaId;??
????????try?{??
????????????URL?urlGet?=?new?URL(url);??
????????????HttpURLConnection?http?=?(HttpURLConnection)?urlGet.openConnection();??
????????????http.setRequestMethod("GET");?//?必須是get方式請求??
????????????http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");??
????????????http.setDoOutput(true);??
????????????http.setDoInput(true);??
????????????System.setProperty("sun.net.client.defaultConnectTimeout",?"30000");//?連接超時30秒??
????????????System.setProperty("sun.net.client.defaultReadTimeout",?"30000");?//?讀取超時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

konvertieren analysiert das Stream-Objekt durch eine Schleife und schreibt Dateien auf Ihren eigenen 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");
????????????????}??
????????????}??
????????}??
????}

Das obige ist der detaillierte Inhalt vonMethoden für die WeChat-Entwicklung zum Aktivieren der Kamera, zum lokalen Anzeigen von Bildern sowie zum Hoch- und Herunterladen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!