微信开发之调起摄像头、本地展示图片、上传下载图片实例

JavaScript 2019-01-06

之前那篇微信JS-SDK授权的文章实现了分享接口，那么这里总结一下如何在微信里面通过js调起原生摄像头，以及上传下载图片。

1.配置

页面引入通过jssdk授权后，传入wx对象，首先配置需要的接口

图片接口 'uploadImage',//上传图片接口 'downloadImage'//下载图片接口　　] });

2.调起拍照/相册

将下面的方法放在需要点击事件的回调函数里面

img标签的src属性显示图片　 $('.driver-card img').prop('src',res.localIds[0]); 　 uploadPhoto.uploadToWeixinServer(res.localIds[0],'car') } });

这时我们可以看到这样的效果，代表调起成功了！chooseImage方法的成功回调里，我将选中的照片赋值给需要显示的img的src（因为我这里只有一张照片，如果有多张用循环赋值即可），这样一来，就可以直接显示刚刚拍照/相册里选中的照片了

3.上传照片

在上面chooseImage的success回调里面，可以看到我调用了uploadToWeixinServer方法，参数为本地照片的Id

显示进度提示 success: function (res) { 　　　　　　　　　　　 //res.serverId 返回图片的微信服务器端ID uploadPhoto.uploadToOwnerServer(res.serverId,type);//异步上传到我们自己的服务器 } }); },

调用uploadImage接口后，将图片上传到了微信服务器，返回图片的ID，这个时候需要用ajax异步上传到自己的服务器里，调用微信提供的“获取临时素材”接口。当然也不一定是选择完照片就立即上传，还得根据实际业务需求出发，也有是静默上传（没有进度提示），也有是在最终提交表单时一起上传

js:

      }
    }
  });
},</pre>

Controller

try {
  /** 将<a href="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a>保存到本地服务器 **/
  String photoName = type + new Date().getTime() + UUID.randomUUID().toString();

  //<a href="https://www.f2er.com/tag/wenjian/" target="_blank" class="keywords">文件</a>路径不存在则创建
  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:{}",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;
}

这里我使用了一个UUID生成主键规则，通过类型+时间戳+唯一字符串定义图片名称。如果上传成功，同时又将自己服务器的图片地址返回给前端。

getInputStream

调用微信提供的获取临时素材接口下载还在微信服务器上的图片，参数为前端提交上来的媒体文件ID，最终将文件转化为输入流对象

文件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;

}

service

通过循环解析流对象，将文件写入自己的服务器

// 循环取出流中的数据
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,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");
    } 
  } 
}

}