ionic3开发企业微信之上传个人头像

在应用的个人中心,总希望用户可以通过点击头像打开摄像头进行图片上传,如何实现呢?我大致分了几步:
1、通过wx.chooseImage 调用相机打开图片 ,然后返回选定照片的本地ID列表,localId能够作为img标签的src属性显示图片。

uploadImage(){
    let that=this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 能够指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 能够指定来源是相冊还是相机,默认二者都有
      success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表,localId能够作为img标签的src属性显示图片
        that.uploadImg(localIds[0]);
      }
    });
  }

2、通过wx.uploadImage上传图片到微信服务器上,并返回serverId 。重点:此处通过Promise返回resolve,是为了防止请求异步问题(实际情况就是这样)

uploadImg(e){
    let that=this;
    that.picUrl="";
    this.nativeService.uploadImage(e).then(serverId => {
      let params = new HttpParams()
        .set("mediaId", serverId)
        .set('loginFrom', 'app');
      let url = GlobalVariable.BASE_URL + 'wx.do?method=downloadMedia';
      this.appService.GET(url, params, (res, err) => {
        if (res) {
          that.picUrl=GlobalVariable.BASE_URL+that.userPicture;
          this.appService.alert("图片上传成功!");
        }
        if (err) {
          console.log(err)
        }
      });
    });
  }


补上nativeService.ts文件
  /**
   * 上传照片
   */
  uploadImage(localId:string): Promise {
    return new Promise((resolve) => {
      wx.uploadImage({
        localId: localId, // 需要上传的图片的本地ID,由chooseImage接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success (res) {
          let serverId = res.serverId;
          console.log("serverId="+serverId)
          resolve(serverId);
        }
      });
    });
  }

3、调用本地后台上传方法,将mediaId传递到后台处理

    //获取媒体文件
    @FieldMeta(description="获取媒体文件",isPermissionNeeded=false)
    @RequestMapping(params="method=downloadMedia")
    public void downloadMedia(HttpServletRequest request, HttpServletResponse response,String mediaId) throws Exception {
        System.out.println(mediaId);
        if(StringUtils.isNotBlank(mediaId)) {
            AccessToken at=TokenThread.accesstoken;
            String token=at.getToken();
            String requestUrl = "https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";
            requestUrl = requestUrl.replace("ACCESS_TOKEN", token).replace(
                    "MEDIA_ID", mediaId);
            HttpURLConnection conn = null;
            try {
                URL url = new URL(requestUrl);
                conn = (HttpURLConnection) url.openConnection();
                conn.setDoInput(true);
                conn.setRequestMethod("GET");
                conn.setConnectTimeout(30000);
                conn.setReadTimeout(30000);
                BufferedInputStream bis = new BufferedInputStream(
                        conn.getInputStream());
                ByteArrayOutputStream swapStream = new ByteArrayOutputStream();  
                byte[] buff = new byte[100];  
                int rc = 0;  
                while ((rc = bis.read(buff, 0, 100)) > 0) {  
                    swapStream.write(buff, 0, rc);  
                }  
                byte[] filebyte = swapStream.toByteArray();  
                boolean hasCreate=this.uploadImageToServer(request,filebyte);
                Success success = new Success();
                if(hasCreate){
                    success.setMsg("Y");
                }else{
                    success.setMsg("N");
                }
                success.setSuccess(true);
                CommonHelper.responseToFront(response, success);
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                if(conn != null){
                    conn.disconnect();
                }
            }
        }else{
            Success success = new Success();
            success.setSuccess(true);
            success.setMsg("N");
            CommonHelper.responseToFront(response, success);
        }

    }
    
    public boolean uploadImageToServer(HttpServletRequest request,byte[] bytes){
        //上传图片到服务器
        String userId = (String)request.getSession().getAttribute("userId");
        String servletPath = request.getSession().getServletContext().getRealPath("/attachment/userPicture");
        File f = new File(servletPath);
        if(!f.exists()) {
            f.mkdirs();
        }
        String filePath = servletPath + File.separator + userId +".jpg";
        
        InputStream in = new ByteArrayInputStream(bytes); 
        BufferedImage image;
        try {
            image = ImageIO.read(in);
            in.close();//必须关闭 不然临时文件 会被占用而导致删除不了
            //3.按照指定尺寸缩小
            Thumbnails.of(image).size(200, 200).keepAspectRatio(false).toFile(new File(filePath));
            return true;
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return false;
        }
    }

到此,头像将可以上传成功啦~记得应用的域名配置别搞错了

你可能感兴趣的:(ionic3开发企业微信之上传个人头像)