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

时间 2019-11-14

原文原文链接

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

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<String, String> signMap = sign(ticket, thisUrl);
        return super.result(signMap);
    }
    
    private 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 = "";

        //注意这里参数名必须所有小写，且必须有序
        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中代码以下html

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

补一点页面代码java

<label class=" control-label">上传图片：</label>
							<div class="dropzone" ng-click="chooseImg($event)">
							<!-- <div id="uploadDiv"></div> -->
								<div  ng-repeat="item in thumb" style="width: 45%; margin: 0 10px 10px 0; float:left;" ng-click="clearChoose($event)">
                <!-- 采用angular循环的方式，对存入thumb的图片进行展现 -->
                    <label>
                        <img ng-src="{{item.imgSrc}}" width="100%" />
                    </label><br>
                    <span ng-if="item.imgSrc" ng-click="img_del($index,$event)">删除图片</span>
                </div> 
						
							</div>

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

$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 记录第一篇angularjs

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

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