這篇文章將為大家詳細(xì)講解有關(guān)微信開(kāi)發(fā)中如何實(shí)現(xiàn)微信jsapi選擇圖片,上傳圖片,預(yù)覽和下載圖片的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括相城網(wǎng)站建設(shè)、相城網(wǎng)站制作、相城網(wǎng)頁(yè)制作以及相城網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái)，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，相城網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到相城省份的部分城市，未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
參數(shù)
| 描述 | | appId | 公眾號(hào)的唯一標(biāo)識(shí) 應(yīng)用id |
| timestamp | 生成簽名的時(shí)間戳 |
| nonceStr | 生成簽名的隨機(jī)串 |
| signature | 簽名 |
上述表格中的四個(gè)參數(shù)是初始化調(diào)用微信jsapi的憑證，咱們?cè)谇皫坠?jié)已經(jīng)反復(fù)說(shuō)明如何使用了，在這里就不在貼出如何生成上述四個(gè)參數(shù)了
完整的jsp代碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
">
微信jsapi測(cè)試-V型知識(shí)庫(kù)
歡迎來(lái)到微信jsapi測(cè)試界面-V型知識(shí)庫(kù)
基礎(chǔ)接口之判斷當(dāng)前客戶端是否支持指定的js接口
圖像接口
拍照或從手機(jī)相冊(cè)中選圖接口
chooseImage
預(yù)覽圖片接口
previewImage
上傳圖片接口
uploadImage
下載圖片接口
downloadImage
顯示圖片
wx.config({
debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開(kāi)，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
appId: '${appId}', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
timestamp: '${ timestamp}' , // 必填，生成簽名的時(shí)間戳
nonceStr: '${ nonceStr}', // 必填，生成簽名的隨機(jī)串
signature: '${ signature}',// 必填，簽名，見(jiàn)附錄1
jsApiList: ['checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage'
] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
});
wx.ready(function(){
// 5 圖片接口
// 5.1 拍照、本地選圖
var images = {
localId: [],
serverId: []
};
document.querySelector('#chooseImage').onclick = function () {
wx.chooseImage({
success: function (res) {
images.localId = res.localIds;
alert('已選擇 ' + res.localIds.length + ' 張圖片');
$("#faceImg").attr("src", res.localIds[0]);//顯示圖片到頁(yè)面上
}
});
};
// 5.2 圖片預(yù)覽
document.querySelector('#previewImage').onclick = function () {
wx.previewImage({
current: 'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
urls: [
'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg',
'http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg'
]
});
};
// 5.3 上傳圖片
document.querySelector('#uploadImage').onclick = function () {
if (images.localId.length == 0) {
alert('請(qǐng)先使用 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('請(qǐng)先使用 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();
};
});
//初始化jsapi接口 狀態(tài)
wx.error(function (res) {
alert("調(diào)用微信jsapi返回的狀態(tài):"+res.errMsg);
});
|
1,上述代碼html按鈕代碼功能已經(jīng)描述的很清楚了，每點(diǎn)擊一個(gè)按鈕觸發(fā)一個(gè)js功能函數(shù)。
2、點(diǎn)擊上傳圖片按鈕之前首先要點(diǎn)擊選擇圖片按鈕功能，上傳圖片成功后會(huì)返回serverid,所以本人認(rèn)為這里非常梗，調(diào)用微信jsapi上傳接口，我的圖片到底上傳到哪里去了呢？實(shí)際上我們把圖片上傳到微信服務(wù)器上了也就是臨時(shí)素材里面去了，可登陸微信官方管理平臺(tái)查看，你也可以調(diào)用微信臨時(shí)素材接口獲取圖片。
3、通過(guò)以上代碼，我們就已經(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
，所以我們就可以把圖片下載到本地了，代碼如下
package com.test.weixin;
import net.sf.json.JSONObject;
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.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
/****
*
* @author V型知識(shí)庫(kù) www.vxzsk.com
*
*/
public class DloadImgUtil {
/**
* 根據(jù)內(nèi)容類型判斷文件擴(kuò)展名
*
* @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 接口訪問(wèn)憑證
* @param mediaId 媒體文件id
* @param savePath 文件在本地服務(wù)器上的存儲(chǔ)路徑
* */
public static String downloadMedia(String accessToken, String mediaId, String savePath) {
try {
accessToken = DloadImgUtil.getAccessToken();
} catch (IOException e) {
e.printStackTrace();
}
String filePath = null;
// 拼接請(qǐng)求地址
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)容類型獲取擴(kuò)展名
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;
}
/***
* 獲取acess_token
* 來(lái)源www.vxzsk.com
* @return
*/
public static String getAccessToken(){
String appid="你公眾號(hào)基本設(shè)置里的應(yīng)用id";//應(yīng)用ID
String appSecret="你公眾號(hào)基本設(shè)置里的應(yīng)用密鑰";//(應(yīng)用密鑰)
String url ="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+appSecret+"";
String backData=DloadImgUtil.sendGet(url, "utf-8", 10000);
String accessToken = (String) JSONObject.fromObject(backData).get("access_token");
return accessToken;
}
/***
* 模擬get請(qǐng)求
* @param url
* @param charset
* @param timeout
* @return
*/
public static String sendGet(String url, String charset, int timeout)
{
String result = "";
try
{
URL u = new URL(url);
try
{
URLConnection conn = u.openConnection();
conn.connect();
conn.setConnectTimeout(timeout);
BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), charset));
String line="";
while ((line = in.readLine()) != null)
{
result = result + line;
}
in.close();
} catch (IOException e) {
return result;
}
}
catch (MalformedURLException e)
{
return result;
}
return result;
}
} |
效果圖如下：
選擇圖片彈出的圖片詳情
上傳成功后返回的serverId
關(guān)于“微信開(kāi)發(fā)中如何實(shí)現(xiàn)微信jsapi選擇圖片,上傳圖片,預(yù)覽和下載圖片的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
分享名稱：微信開(kāi)發(fā)中如何實(shí)現(xiàn)微信jsapi選擇圖片,上傳圖片,預(yù)覽和下載圖片的方法
文章位置：
http://weahome.cn/article/jsopce.html
重慶分公司
重慶分公司
