<h2>1.配置</h2>    <p>页面引入通过jssdk授权后，传入wx对象，首先配置需要的接口</p>    <pre>  <code class="language-java">wx.config({      /* debug: true,  */      appId: appid,       timestamp: timestamp,       nonceStr: nonceStr,       signature: signature,      jsApiList: [           'chooseImage',//拍照或从手机相册中选图接口           'previewImage',//预览图片接口           'uploadImage',//上传图片接口           'downloadImage'//下载图片接口           ]   });      </code></pre>    <h2>2.调起拍照/相册</h2>    <p>将下面的方法放在需要点击事件的回调函数里面</p>    <pre>  <code class="language-java">wx.chooseImage({      count: 1, //张数， 默认9      sizeType: ['compressed'], //建议压缩图      sourceType: ['album', 'camera'], // 来源是相册、相机      success: function (res) {                  //var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片           $('.driver-card img').prop('src',res.localIds[0]);           uploadPhoto.uploadToWeixinServer(res.localIds[0],'car')     }  });  </code></pre>    <p>这时我们可以看到这样的效果，代表调起成功了！chooseImage方法的成功回调里，我将选中的照片赋值给需要显示的img的src（因为我这里只有一张照片，如果有多张用循环赋值即可），这样一来，就可以直接显示刚刚拍照/相册里选中的照片了</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/34ab49d54e9bd901b976a1ee772970b6.png"></p>    <h2>3.上传照片</h2>    <p>在上面chooseImage的success回调里面，可以看到我调用了uploadToWeixinServer方法，参数为本地照片的Id</p>    <pre>  <code class="language-java">uploadToWeixinServer: function(localId,type){              wx.uploadImage({                  localId: localId,                  isShowProgressTips: 1, // 默认为1，显示进度提示                  success: function (res) {                                               //res.serverId 返回图片的微信服务器端ID                      uploadPhoto.uploadToOwnerServer(res.serverId,type);//异步上传到我们自己的服务器                  }              });          },  </code></pre>    <p>调用uploadImage接口后，将图片上传到了微信服务器，返回图片的ID，这个时候需要用ajax异步上传到自己的服务器里，调用微信提供的“获取临时素材”接口。当然也不一定是选择完照片就立即上传，还得根据实际业务需求出发，也有是静默上传（没有进度提示），也有是在最终提交表单时一起上传</p>    <h3>js:</h3>    <pre>  <code class="language-java">uploadToOwnerServer: function(serverId,type){              $.ajax({                  data: {serverId:serverId,type:type},                  type : "POST",                  url : WX_ROOT + "wechat/uploadPhoto",                  success : function(json) {                      if (json) {                          var data = JSON.parse(json.data);                          if ('car' == type)                               uploadPhoto.options.carImage = data.path + data.name                          else                              uploadPhoto.options.idCardImage = data.path + data.name                                                }                  }              });          },  </code></pre>    <h3>Controller</h3>    <pre>  <code class="language-java">@RequestMapping(value = "/uploadPhoto", method = RequestMethod.POST)      public @ResponseBody HttpResult uploadPhoto(@RequestParam String serverId,@RequestParam String type) throws Exception{          LOGGER.info("RestFul of uploadPhoto parameters serverId:{},type:{}",serverId,type);                    try {              /** 将图片保存到本地服务器 **/              String photoName = type + new Date().getTime() + UUID.randomUUID().toString();                            //文件路径不存在则创建              File saveFile = new File(PIC_PATH + type);              if (!saveFile.mkdir()) saveFile.mkdir();                            wechatService.saveImageToDisk(serverId, photoName, PIC_PATH + type + "/");              LOGGER.info("Download the picture from weixin server pathL:{}",PIC_PATH + type + "/");              JSONObject data = new JSONObject();              data.put("name", type + "/" + photoName+".jpg");              data.put("path", PIC_SERVER + "/");                            HttpResult rs = new HttpResult();              rs.setCode(200);              rs.setData(data.toJSONString());              LOGGER.info("Download the picture from weixin server is successful!serverId:{},photoName:{}",serverId,photoName);              LOGGER.info("HttpResult data:{}",rs.getData());              return rs;          } catch (Exception e) {              LOGGER.error("Download the picture from weixin server is error",serverId);              return null;          }  </code></pre>    <p>这里我使用了一个UUID生成主键规则，通过类型+时间戳+唯一字符串定义图片名称。如果上传成功，同时又将自己服务器的图片地址返回给前端。</p>    <h3>getInputStream</h3>    <p>调用微信提供的获取临时素材接口下载还在微信服务器上的图片，参数为前端提交上来的媒体文件ID，最终将文件转化为输入流对象</p>    <pre>  <code class="language-java">/**       * 根据文件id下载文件        * @param accessToken       * @param mediaId        * @return 文件流对象       */      public InputStream getInputStream(String accessToken, String mediaId) {            InputStream is = null;            String url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token="+ accessToken + "&media_id=" + mediaId;            try {                URL urlGet = new URL(url);                HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();                http.setRequestMethod("GET"); // 必须是get方式请求                http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");                http.setDoOutput(true);                http.setDoInput(true);                System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 连接超时30秒                System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 读取超时30秒                http.connect();                // 获取文件转化为byte流                is = http.getInputStream();            } catch (Exception e) {                LOGGER.error("Failed to convert inputStream from weixin server,accessToken:{},mediaId:{}",accessToken,mediaId);          }            return is;            }    </code></pre>    <h3>service</h3>    <p>通过循环解析流对象，将文件写入自己的服务器</p>    <pre>  <code class="language-java">public void saveImageToDisk(String mediaId, String picName, String picPath) throws Exception {            String accessToken = getBaseAccessToken();          InputStream inputStream = getInputStream(accessToken, mediaId);                     // 循环取出流中的数据          byte[] data = new byte[1024];            int len = 0;            FileOutputStream fileOutputStream = null;            try {                fileOutputStream = new FileOutputStream(picPath+picName+".jpg");                while ((len = inputStream.read(data)) != -1) {                    fileOutputStream.write(data, 0, len);                }                LOGGER.info("Write the fileInputStream is successful");          } catch (IOException e) {                LOGGER.error("Write the fileInputStream is error");          } finally {                if (inputStream != null) {                    try {                        inputStream.close();                    } catch (IOException e) {                        LOGGER.error("Close the fileInputStream is error");                  }                }                if (fileOutputStream != null) {                    try {                        fileOutputStream.close();                    } catch (IOException e) {                        LOGGER.error("Close the fileOutputStream is error");                  }                }            }        }    </code></pre>    <h2>4.总结</h2>    <p>那么到这里，简单的拍照，展示图片，上传下载的功能都已经完成，其实代码就是最好的注释！微信开放的jssdk提供了很多友好而有趣的功能，接下来还需要继续实践研究....</p>    <p> </p>    <p>来自：http://www.cnblogs.com/liliangel/p/6144247.html</p>    <p> </p>