關於使用微信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