微信开发 --- 调用微信上传图片接口,并保存到自己的服务器

微信开发 — 调用微信上传图片接口,并保存到自己的服务器

整体思路是这样的:
1.先把手机上的图片上传到微信服务器,然后返回一个图片ID
2.在通过后台根据ID从微信后台拿到流,保存到服务器
前几个步骤在之前的博客上有提到调通wx.config{}
js

$.ajax({type : "post",url : "wx/sys.do", //之前的博客上有写到data : {"url" : location.href.split('#')[0]},dataType : "json",success : function(data) {wx.config({debug : false, // 开启调试模式   appId : data.data.appId,timestamp : data.data.timestamp,nonceStr : data.data.nonceStr,signature : data.data.signature,jsApiList : [ 'checkJsApi', 'uploadImage', 'chooseImage' ]// 必填，需要使用的JS接口列表，所有JS接口列表见附录2 });wx.error(function(res) {alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。});wx.ready(function() {wx.checkJsApi({jsApiList : [ 'chooseImage' ],success : function(res) {}});});//点击按钮$("#scanQRCode").click(function() {wx.chooseImage({count : 1, // 默认9sizeType : [ 'original', 'compressed' ], // 可以指定是原图还是压缩图，默认二者都有sourceType : [ 'album', 'camera' ], // 可以指定来源是相册还是相机，默认二者都有success : function(res) {var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片localIdArr = localIds;uploadImg(localIds);}});});}});var int = 0;var serverIdArr = new Array();var localIdArr = new Array();function uploadImg(localIds) {//上传成功，微信服务器会返回一个本地ID，可以预览wx.uploadImage({//根据本地ID获得微信服务器IDlocalId : localIds[int].toString(), // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips : 1, // 默认为1，显示进度提示success : function(res) {var serverId = res.serverId; // 返回图片的服务器端IDvar id = $('#id').val();//id$.ajax({type : "post",//这个方法很重要url : "wx/upload.do?mediaId=" + serverId + "&id=" + id,//mediaId这个就是微信返回的id传到后台data : {//data: {"mediaId": serverId},  },dataType : "json",success : function(msg) {if (msg.code == 1) {top.layer.msg("上传成功！", {icon : 6});location.reload();} else {lock = true;top.layer.msg(msg.msg, {icon : 5});}}});}});}

jsp
因为框架不同样式可能不太一样
我这个上传成功后刷新页面从服务器取一下上传的图片

<div class="layui-input-block" style="margin-top: 10px; margin-bottom: 10px; display: block;" id="divy"><img <c:if test="${url.url == null}">src="data:images/null.jpg" </c:if> src="/${url.url}" width="160px" height="150px" />
</div>
<div class="layui-input-block" style="margin-top: 10px; margin-bottom: 10px;"><button class="layui-btn layui-btn-normal" id="scanQRCode" style="text-align: center; background-color: #ff4e00; width: 160px;">上传微信二维码</button>
</div>

Controller

/*** @Method 微信图片下载到服务器* @author * @throws Exception* @createTime*/@ResponseBody@RequestMapping("upload")public JsonBean upload(String mediaId, HttpServletRequest servletRequest, HttpServletRequest request, int id) throws Exception {InputStream input = null;FileOutputStream output = null;try {// 从微信获取的流,这个utils就是根据返回mediaId后去流的input = picDownload.getInputStream(mediaId);String path = "qr";File folder = new File(uploadFilePath + path);if (!folder.exists()) {folder.mkdirs();}File targetFile = new File(folder, new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date()) + ".jpg");output = new FileOutputStream(targetFile);IOUtils.copy(input, output);//上边就是把图片保存到服务器里//下边是数据库的一些操作// 如果数据库有就删除QrMe qrMe = qrMeService.selectTeacherId(id);if (qrMe != null) {qrMeService.deleteUrl(id);new File(uploadFilePath + qrMe.getUrl()).delete();}// 添加数据库QrMe newQrMe = new QrMe();newQrMe.setUrl(path + "/" + targetFile.getName());newQrMe.setTeacherid(id);return qrMeService.insertQR(newQrMe);} finally {IOUtils.closeQuietly(input);IOUtils.closeQuietly(output);}}

utils

package com.admin.commons.utils;import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;@Component
public class PicDownload {//微信接口 @Autowiredprivate WeiXinUtils weiXinUtils;/*** 根据文件id下载文件* * @param mediaId 媒体id* @throws IOException* @throws Exception*/public InputStream getInputStream(String mediaId) throws IOException {InputStream is = null;String url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" + weiXinUtils.getAccessToken() + "&media_id=" + mediaId;  根据AccessToken获取mediatry {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();is = http.getInputStream();} catch (Exception e) {e.printStackTrace();}return is;}/*** 获取下载图片信息（jpg）* * @param mediaId 文件的id* @throws Exception*/public void saveImageToDisk(String mediaId) throws Exception {InputStream inputStream = getInputStream(mediaId);byte[] data = new byte[1024];int len = 0;FileOutputStream fileOutputStream = null;try {fileOutputStream = new FileOutputStream("test1.jpg");while ((len = inputStream.read(data)) != -1) {fileOutputStream.write(data, 0, len);}} catch (IOException e) {e.printStackTrace();} finally {if (inputStream != null) {try {inputStream.close();} catch (IOException e) {e.printStackTrace();}}if (fileOutputStream != null) {try {fileOutputStream.close();} catch (IOException e) {e.printStackTrace();}}}}
}

刚开始接触这个功能,在网上找了很多资料踩了很多坑,图片不是直接上传到服务器的,而是先上传到微信的服务器,然后再下载到自己的服务器
前台我用的是layui框架

微信开发 --- 调用微信上传图片接口,并保存到自己的服务器相关推荐

php 微信语音,PHP语言微信开发：微信录音临时转永久存储
本文主要向大家介绍了PHP语言微信开发:微信录音临时转永久存储,通过具体的内容向大家展示,希望对大家学习php语言有所帮助. 最近做开发的时候碰到了这个问题,甲方希望用户在微信端的录音能够一直有效.就 ...
微信开发：微信js_sdk 分享，前端部分(二)
微信开发:微信js-sdk前端分享,代码如下: <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> ...
html页面调用微信扫一扫功能,微信JSSDK调用微信扫一扫功能的方法
如何利用微信jssdk调用微信扫一扫功能?具体内容如下 1. 确保有调起微信扫一扫接口权限,测试号可能不行: 2. 导入相关js 3. 页面触发扫码元素 4. 相关js代码 var _appid ...
php调用微信扫一扫功能,微信JSSDK调用微信扫一扫功能的方法
如何利用微信JSSDK调用微信扫一扫功能?具体内容如下 1. 确保有调起微信扫一扫接口权限,测试号可能不行: 2. 导入相关JS 3. 页面触发扫码元素 4. 相关JS代码 var _appId ...
微信鉴权服务器地址,微信开发之微信授权登录
本篇教程探讨了微信开发之微信授权登录,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 应用场景是:用Hbuilder打包app,在app中点击微信授权登录或者某一操作, ...
java 微信开发收到乱码_微信公众号开发调用微信接口得到的参数中文变成乱码问题...
做过微信开发的人应该都会接触到授权登录.获取用户信息等操作,比如获取用户信息,腾讯要求以get请求提交,返回的是json字符串. 通常我们使用的方法是用HttpURLConnection去调用接口,打 ...
微信网页开发调用微信jssdk接口遇到的坑以及最终解决方法（持续更新）
1.微信网页开发调用jssdk时报permission denied 大致是两个原因 (1)首先注册时未将你所调用的接口名字添加至jsApiList (2)第二个就是你的这个公众号没有权限使用这个ap ...
微信开发php插件下载图片,微信开发之微信jsapi选择图片,上传图片,预览和下载图片方法...
参数描述 appId公众号的唯一标识应用id timestamp生成签名的时间戳 nonceStr生成签名的随机串 signature签名上述表格中的四个参数是初始化调用微信jsapi的凭证,咱们 ...
微信开发获取access_token(凭证)接口的详解
在微信开发中,就有一些接口会涉及到获取接口凭证的接口,开发文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp142114018 ...

微信开发 --- 调用微信上传图片接口,并保存到自己的服务器

微信开发 — 调用微信上传图片接口,并保存到自己的服务器

微信开发 --- 调用微信上传图片接口,并保存到自己的服务器相关推荐

最新文章

热门文章