微信js上传图片 java_关于使用微信js上传图片 笔记

微信js初始化时需要签名，先获取签名(java代码)：

1.获取jsapi_ticket,此数据自己保存，有效时长为7200秒privateString getJsticket(String token){

String result= null;try{

String urlStr= String.format("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi", token);

String data=HttpClientUtil.httpGetRequest(urlStr);//{"errcode":0,"errmsg":"ok","ticket":"sM4AOVdWfPE4DxkXGEs8VPvFTRqUU89uimy3w_HNh2xVgtI4VJEKLqlcLjLswb1UpNA94FtOzhhzKZSBUqc8gA","expires_in":7200}

JSONObject jsonObj =JSONObject.fromObject(data);

result= jsonObj.getString("ticket");

}catch(Exception e){

logger.error("==tokenjob getJsticket error==>" +e.getMessage());

}returnresult;

}2.获取签名相关数据

@GetMapping("/getticket")public Result getTicket(HttpServletRequest request, HttpServletResponse response) throwsUnsupportedEncodingException{

WechatToken wechatToken=wechatTokenService.selectByType(WechatConstant.APPTYPE);

String ticket=wechatToken.getJsticket();

String thisUrl= request.getParameter("url");if(StringUtils.isNotBlank(thisUrl) && thisUrl.indexOf("#") >0){

thisUrl= thisUrl.substring(0, thisUrl.indexOf("#"));

}

Map signMap =sign(ticket, thisUrl);return super.result(signMap);

}private Mapsign(String jsapi_ticket, String url) {

Map ret = new HashMap();

String nonce_str=create_nonce_str();

String timestamp=create_timestamp();

String string1;

String signature= "";//注意这里参数名必须全部小写，且必须有序

string1 = "jsapi_ticket=" + jsapi_ticket +

"&noncestr=" + nonce_str +

"&timestamp=" + 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);

ret.put("appId", WechatConstant.APPID);returnret;

}private static String byteToHex(final byte[] hash) {

Formatter formatter= newFormatter();for (byteb : hash)

{

formatter.format("%02x", b);

}

String result=formatter.toString();

formatter.close();returnresult;

}private staticString create_nonce_str() {returnUUID.randomUUID().toString();

}private staticString create_timestamp() {return Long.toString(System.currentTimeMillis() / 1000);

}

View Code

接着就是前端签名认证，我是使用angularjs的新手不知道如何入手，写在了run中代码如下

var localhostUrl = window.location.href.split('#')[0];

$http({method:'GET',url:'/rest/v1/wechat/getticket',params:{'url':localhostUrl}}).success(function(response){

console.log(response);

wx.config({//debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

debug : false, //开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId : response.data.appId + '', //必填，公众号的唯一标识

timestamp : response.data.timestamp, //必填，生成签名的时间戳

nonceStr : response.data.nonceStr + '', //必填，生成签名的随机串

signature : response.data.signature + '',//必填，签名，见附录1

jsApiList : [ 'checkJsApi', 'hideMenuItems', 'showMenuItems','hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem','chooseImage', 'previewImage', 'uploadImage','downloadImage', 'getNetworkType', 'openLocation','getLocation', 'hideOptionMenu', 'showOptionMenu','closeWindow', 'scanQRCode', 'openCard']//必填，需要使用的JS接口列表，所有JS接口列表见附录2

});

})

View Code

接下来就是使用代码微信js了，看了文档，图片可以使用本地的localId，羡慕的要死，然而我用了并没有显示出来，所以后台返回了上传的图片地址，把src展示位后台返回的服务器访问地址

//图片start

$scope.form = { //用于绑定提交内容，图片或其他数据

image:{},

};

$scope.thumb= {}; //用于存放图片的base64

$scope.thumb_default = { //用于循环默认的‘加号’添加图片的框

1111:{}

};

$scope.getGuid= function() {functionS4() {return (((1+Math.random())*0x10000)|0).toString(16).substring(1);

}return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());

}/*引入微信js**/

functionwxUploadImage(localId){var guid = $scope.getGuid(); //通过时间戳创建一个随机数，作为键名使用

$scope.$apply(function(){

$scope.thumb[guid]={

guid : guid,

}

});

wx.uploadImage({

localId: localId.toString(),//需要上传的图片的本地ID，由chooseImage接口获得

isShowProgressTips: 1, //默认为1，显示进度提示

success: function(res) {var serverId = res.serverId; //返回图片的服务器端ID

var data = new FormData(); //以下为像后台提交图片数据//console.log(file);

data.append('imgServerId', serverId);//files[i]

data.append('guid',guid);

$http({

method:'post',

url:'/rest/v1/image/upload',

data:data,

headers: {'Content-Type': undefined},

transformRequest: angular.identity

}).success(function(result) {if (result.message == 'ok') {

$scope.form.image[result.data.param1]=result.data.param1;

$scope.thumb[result.data.param1].status= 'SUCCESS';

$scope.thumb[result.data.param1].img=result.data.fileName;

$scope.thumb[result.data.param1].imgSrc= "server img host/"+result.data.fileName;//console.log($scope.form);

}else{

console.log(result);

}if(result.message == 'file is null'){

console.log(result);

}

});

}

});

}

$scope.chooseImg= function($event){

console.log($event);

wx.chooseImage({

count :9, //默认9

//sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有

sizeType : [ 'compressed' ], //指定是压缩图

sourceType : [ 'album', 'camera' ], //可以指定来源是相册还是相机，默认二者都有

success : function(res) {var localIds = res.localIds;//返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片

for(var i = 0; i < localIds.length; i++){//上传图片接口

wxUploadImage(localIds[i]);

}

},

fail :function(res) {

alterShowMessage("操作提示", JSON.stringify(res), "1", "确定","", "", "");

}

});

}

View Code

补一点页面代码

上传图片：

删除图片

接着是布局的一点点有必要记录下

$scope.img_del = function(key,$event) { //删除，删除的时候thumb和form里面的图片数据都要删除，避免提交不必要的

var guidArr = [];

for(var p in $scope.thumb){

guidArr.push(p);

}

delete $scope.thumb[guidArr[key]];

delete $scope.form.image[guidArr[key]];

$event.stopPropagation();

};

$scope.clearChoose = function($event){

$event.stopPropagation();

}

提交时的image

var images = [];

angular.forEach($scope.thumb, function (data) {

if(data && data.img)

images.push(data.img);

});

angular.forEach($scope.uploadImg, function (data) {

if(data && data.img)

images.push(data.img);

});

if (images.length > 0) {

$scope.ticket.images = images.join(',');

}

以上是使用angularjs的新手写的，现在使用jquery的应该蛮多，我觉得修改为jquery 看上面代码应该也蛮简单去实现的，直接去append hmtl就好。如果有不懂的可以联系QQ 64221292  记录第一篇