微信 java 實現(xiàn)js-sdk 圖片上傳下載完整流程
更新時間：2016年10月21日 15:13:34 投稿：lqh
這篇文章主要介紹了微信 java 實現(xiàn)js-sdk 圖片上傳下載完整流程的相關(guān)資料,需要的朋友可以參考下
最近做的一個項目剛好用到微信js-sdk的圖片上傳接口，在這里做一下總結(jié)。
在這里能知道使用js api的基本配置
https://mp.weixin.qq.com/wiki
t=resource/res_main&id=mp1421141115&token=&lang=zh_CN
我這里沒有用checkJsApi去判斷當前客戶端版本是否支持指定JS接口，好。通過看開發(fā)文檔，我們知道調(diào)用js接口直接都要通過config接口注入權(quán)限驗證配置
<code class="hljs cs">wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});</code>
獲取config里面參數(shù)的代碼如下，我這里只用到chooseImage和uploadImage接口，chooseImage接口是拍照或從手機相冊中選圖接口，uploadImage接口是用來上傳圖片，所以jsApiList里面只寫這兩個就可以了
<code class="hljs avrasm">import java.util.UUID;
import java.util.Map;
import java.util.HashMap;
import java.util.Formatter;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.io.UnsupportedEncodingException;
public class WxConfig {
public static void main(String[] args) {
String jsapi_ticket = "jsapi_ticket";
// 注意 URL 一定要動態(tài)獲取，不能 hardcode
String url = "http://example.com";
Map<string, string=""> ret = sign(jsapi_ticket, url);
for (Map.Entry entry : ret.entrySet()) {
System.out.println(entry.getKey() + ", " + entry.getValue());
}
};
public static Map<string, string=""> sign(String jsapi_ticket, String url) {
Map<string, string=""> ret = new HashMap<string, string="">();
String nonce_str = create_nonce_str();
String timestamp = create_timestamp();
String string1;
String signature = "";
//注意這里參數(shù)名必須全部小寫，且必須有序
string1 = "jsapi_ticket=" + jsapi_ticket +
"&noncestr=" + nonce_str +
"×tamp=" + timestamp +
"&url=" + url;
System.out.println(string1);
try
{
MessageDigest crypt = MessageDigest.getInstance("SHA-1");
crypt.reset();
crypt.update(string1.getBytes("UTF-8"));
signature = byteToHex(crypt.digest());
}
catch (NoSuchAlgorithmException e)
{
e.printStackTrace();
}
catch (UnsupportedEncodingException e)
{
e.printStackTrace();
}
ret.put("url", url);
ret.put("jsapi_ticket", jsapi_ticket);
ret.put("nonceStr", nonce_str);
ret.put("timestamp", timestamp);
ret.put("signature", signature);
return ret;
}
private static String byteToHex(final byte[] hash) {
Formatter formatter = new Formatter();
for (byte b : hash)
{
formatter.format("%02x", b);
}
String result = formatter.toString();
formatter.close();
return result;
}
private static String create_nonce_str() {
return UUID.randomUUID().toString();
}
private static String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
}
}
</string,></string,></string,></string,></code>
ticket可以通過accessToken獲取，代碼如下
<code class="hljs cs">public static String getTicket(String accessToken) throws ParseException, IOException {
public final static String sign_ticket_create_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
JSONObject jsonObject = new JSONObject();
JSONObject postjson=new JSONObject();
String ticket =null;
String url = sign_ticket_create_url.replace("ACCESS_TOKEN",accessToken);
System.out.print("url="+url);
String ticketurl ="";
try {
jsonObject = WeixinUtil.httpsRequest(url, "POST",postjson.toString());
ticket= jsonObject.getString("ticket");
System.out.println("ticket:"+ticket);
}catch (Exception e) {
e.printStackTrace();
}
return ticket;
};</code>
當注入權(quán)限驗證成功的時候會進入ready接口，那么我們就在ready接口里面繼續(xù)我們需要的操作
<code class="hljs javascript">wx.ready(function(){
//拍照或從手機相冊中選圖接口
wx.chooseImage({
count: 1, // 最多能選擇多少張圖片，默認9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
success: function (res) {
var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片
//上傳圖片接口
wx.uploadImage({
localId: localIds.toString(), // 需要上傳的圖片的本地ID，由chooseImage接口獲得
isShowProgressTips: 1, // 默認為1，顯示進度提示
success: function (res) {
var serverId = res.serverId; // 返回圖片的服務(wù)器端ID
}
});
}
});
});</code>
通過以上代碼，我們就已經(jīng)把圖片上傳到微信服務(wù)器了，但是我們上傳到微信服務(wù)器的圖片只能保存3天，所以上傳完之后我們要把圖片下載到我們的本地服務(wù)器，這里用到微信下載多媒體接口
http://file.api.weixin.qq.com/cgi-bin/media/get?
access_token=ACCESS_TOKEN&media_id=MEDIA_ID
其中media_id就是我們上面的serverId ，所以我們就可以把圖片下載到本地了，代碼如下
<code class="hljs java">import org.apache.log4j.Level;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import org.apache.log4j.Priority;
import org.springframework.util.StringUtils;
import java.io.*;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLConnection;
public class DloadImgUtil {
/**
* 根據(jù)內(nèi)容類型判斷文件擴展名
*
* @param contentType 內(nèi)容類型
* @return
*/
public static String getFileexpandedName(String contentType) {
String fileEndWitsh = "";
if ("image/jpeg".equals(contentType))
fileEndWitsh = ".jpg";
else if ("audio/mpeg".equals(contentType))
fileEndWitsh = ".mp3";
else if ("audio/amr".equals(contentType))
fileEndWitsh = ".amr";
else if ("video/mp4".equals(contentType))
fileEndWitsh = ".mp4";
else if ("video/mpeg4".equals(contentType))
fileEndWitsh = ".mp4";
return fileEndWitsh;
}
/**
* 獲取媒體文件
* @param accessToken 接口訪問憑證
* @param mediaId 媒體文件id
* @param savePath 文件在本地服務(wù)器上的存儲路徑
* */
public static String downloadMedia(String accessToken, String mediaId, String savePath) {
try {
accessToken = WeixinUtil.getAccessToken1().getToken();
} catch (IOException e) {
e.printStackTrace();
}
String filePath = null;
// 拼接請求地址
String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";
requestUrl = requestUrl.replace("ACCESS_TOKEN", accessToken).replace("MEDIA_ID", mediaId);
try {
URL url = new URL(requestUrl);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setDoInput(true);
conn.setRequestMethod("GET");
if (!savePath.endsWith("/")) {
savePath += "/";
}
// 根據(jù)內(nèi)容類型獲取擴展名
String fileExt = DloadImgUtil .getFileexpandedName(conn.getHeaderField("Content-Type"));
// 將mediaId作為文件名
filePath = savePath + mediaId + fileExt;
BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());
FileOutputStream fos = new FileOutputStream(new File(filePath));
byte[] buf = new byte[8096];
int size = 0;
while ((size = bis.read(buf)) != -1)
fos.write(buf, 0, size);
fos.close();
bis.close();
conn.disconnect();
String info = String.format("下載媒體文件成功，filePath=" + filePath);
System.out.println(info);
} catch (Exception e) {
filePath = null;
String error = String.format("下載媒體文件失?。?s", e);
System.out.println(error);
}
return filePath;
}
}
</code>
這樣就完成了js-sdk圖片上傳下載了。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript中的方法重載實例,本文直接給出重載實例,需要的朋友可以參考下2015-03-03
Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關(guān)系進行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源，這篇文章主要介紹了JavaScript中Webpack的使用,需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細介紹了如何利用TypeScript編寫貪吃蛇游戲，文中的示例代碼講解詳細，具有一定的借鑒價值，感興趣的可以了解一下2022-09-09
上次做圖片滑動展示效果時做了減速效果，就想做一個加速效果。結(jié)合起來就想到了下面這個東西，當然只是類似彈簧，而不是真正的彈簧。2008-09-09
fixedBox固定div漂浮代碼支持ie6以上大部分主流瀏覽器
本例為大家分享的是fixedBox固定div漂浮代碼支持ie6以上大部分瀏覽器，需要的朋友可以參考下2014-06-06
Bootstrap每天必學之導航條，本文向大家講解了多種多樣的導航條，以及導航條中元素的實現(xiàn)方法，感興趣的小伙伴們可以參考一下2015-11-11
JavaScript中關(guān)于e.keycode的使用
這篇文章主要介紹了JavaScript中關(guān)于e.keycode的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
JavaScript判斷數(shù)據(jù)類型的四種方式總結(jié)
JavaScript 作為一門動態(tài)語言,其靈活性是把雙刃劍,一方面帶來了開發(fā)的便利性,另一方面也給我們在類型判斷時帶來了挑戰(zhàn),特別是在處理類型轉(zhuǎn)換和隱式轉(zhuǎn)換的時候,所以本篇文章我們將探討 JavaScript 中的數(shù)據(jù)類型判斷方式及在實際項目中的應(yīng)用,需要的朋友可以參考下2025-04-04
ng-options和ng-checked在表單中的高級運用(推薦)
AngularJS是當前非常的流行的前端框架，它的語法糖非常多，也極大的方便了前端開發(fā)者。這篇文章主要介紹了ng-options和ng-checked在表單中的高級運用,需要的朋友可以參考下2017-01-01
利用Bootstrap實現(xiàn)表格復選框checkbox全選
Bootstrap相信應(yīng)該不用多介紹，來自 Twitter，是目前最受歡迎的前端框架。這篇文章主要給大家介紹了如何利用Bootstrap實現(xiàn)表格中的checkbox復選框全選效果，文中給出詳細的介紹及完整的實例代碼，相信對大家的理解和學習具有一定的參考借鑒價值，下面來一起看看吧。2016-12-12