关于使用微信js上传图片笔记-白红宇

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

阅读量：6967 次

发布时间：2019-06-27

本文共 8461 字，大约阅读时间需要 28 分钟。

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

1.获取jsapi_ticket,此数据自己保存，有效时长为7200秒private String 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());        }        return result;    }2.获取签名相关数据@GetMapping("/getticket")    public Result getTicket(HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException{        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 Map
       
         sign(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);        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);    }

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() {          function S4() {            return (((1+Math.random())*0x10000)|0).toString(16).substring(1);          }          return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());        }        /* 引入微信js**/    function wxUploadImage(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();    }提交时的imagevar 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 记录第一篇

转载于:https://www.cnblogs.com/seanblogs/p/6524597.html

你可能感兴趣的文章