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

本文介绍微信开发之调起摄像头、本地展示图片、上传下载图片方法1.配置页面引入通过jssdk授权后，传入wx对象，首先配置需要的接口wx.config({/* debug: true,*/appId: appid,timestamp: timestamp,nonceStr: nonceStr,signature: signature,jsApiList: ['chooseImage',//拍照或从手机相册中选图接口'previewImage',//预览图片接口'uploadImage',//上传图片接口'downloadImage'//下载图片接口 　　] });2.调起拍照/相册将下面的方法放在需要点击事件的回调函数里面 wx.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: function (res) {　　　　//var localIds = res.localIds;　 $('.driver-card img').prop('src',res.localIds[0]);　 uploadPhoto.uploadToWeixinServer(res.localIds[0],'car')}});这时我们可以看到这样的效果，代表调起成功了！chooseImage方法的成功回调里，我将选中的照片赋值给需要显示的img的src（因为我这里只有一张照片，如果有多张用循环赋值即可），这样一来，就可以直接显示刚刚拍照/相册里选中的照片了

3.上传照片在上面chooseImage的success回调里面，可以看到我调用了uploadToWeixinServer方法，参数为本地照片的IduploadToWeixinServer: 1调用uploadImage接口后，将图片上传到了微信服务器，返回图片的ID，这个时候需要用ajax异步上传到自己的服务器里，调用微信提供的“获取临时素材”接口。当然也不一定是选择完照片就立即上传，还得根据实际业务需求出发，也有是静默上传（没有进度提示），也有是在最终提交表单时一起上传js: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.nameelseuploadPhoto.options.idCardImage = data.path + data.name}}});},Controller@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;}这里我使用了一个UUID生成主键规则，通过类型+时间戳+唯一字符串定义图片名称。如果上传成功，同时又将自己服务器的图片地址返回给前端。getInputStream调用微信提供的获取临时素材接口下载还在微信服务器上的图片，参数为前端提交上来的媒体文件ID，最终将文件转化为输入流对象/*** 根据文件id下载文件* @param accessToken* @param mediaId* @return 文件流对象*/public InputStream getInputStream(String accessToken, String mediaId) {InputStream is = null;String url = "http://www.php.cn/"+ 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通过循环解析流对象，将文件写入自己的服务器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");}}}}以上就是微信开发之调起摄像头、本地展示图片、上传下载图片方法的详细内容，更多请关注小潘博客其它相关文章！