千家信息网

微信开发中如何实现微信jsapi选择图片,上传图片,预览和下载图片的方法

发表于:2025-01-31 作者:千家信息网编辑
千家信息网最后更新 2025年01月31日,这篇文章将为大家详细讲解有关微信开发中如何实现微信jsapi选择图片,上传图片,预览和下载图片的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。参数描述appId
千家信息网最后更新 2025年01月31日微信开发中如何实现微信jsapi选择图片,上传图片,预览和下载图片的方法

这篇文章将为大家详细讲解有关微信开发中如何实现微信jsapi选择图片,上传图片,预览和下载图片的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

参数


描述
appId公众号的唯一标识 应用id
timestamp生成签名的时间戳
nonceStr生成签名的随机串
signature签名

上述表格中的四个参数是初始化调用微信jsapi的凭证,咱们在前几节已经反复说明如何使用了,在这里就不在贴出如何生成上述四个参数了

完整的jsp代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>          微信jsapi测试-V型知识库              

欢迎来到微信jsapi测试界面-V型知识库

基础接口之判断当前客户端是否支持指定的js接口


拍照或从手机相册中选图接口

预览图片接口

上传图片接口

下载图片接口

显示图片

1,上述代码html按钮代码功能已经描述的很清楚了,每点击一个按钮触发一个js功能函数。

2、点击上传图片按钮之前首先要点击选择图片按钮功能,上传图片成功后会返回serverid,所以本人认为这里非常梗,调用微信jsapi上传接口,我的图片到底上传到哪里去了呢?实际上我们把图片上传到微信服务器上了也就是临时素材里面去了,可登陆微信官方管理平台查看,你也可以调用微信临时素材接口获取图片。

3、通过以上代码,我们就已经把图片上传到微信服务器了,但是我们上传到微信服务器的图片只能保存3天,所以上传完之后我们要把图片下载到我们的本地服务器,这里用到微信下载多媒体接口http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID 其中media_id就是我们上面的serverId ,所以我们就可以把图片下载到本地了,代码如下

package com.test.weixin;import net.sf.json.JSONObject;import org.apache.log4j.Level;import org.apache.log4j.LogManager;import org.apache.log4j.Logger;import org.apache.log4j.Priority;import org.springframework.util.StringUtils;import java.io.*;import java.net.HttpURLConnection;import java.net.MalformedURLException;import java.net.URL;import java.net.URLConnection;/**** *  * @author V型知识库 www.vxzsk.com * */public class DloadImgUtil {  /**   * 根据内容类型判断文件扩展名   *   * @param contentType 内容类型   * @return   */  public static String getFileexpandedName(String contentType) {    String fileEndWitsh = "";    if ("image/jpeg".equals(contentType))      fileEndWitsh = ".jpg";    else if ("audio/mpeg".equals(contentType))      fileEndWitsh = ".mp3";    else if ("audio/amr".equals(contentType))      fileEndWitsh = ".amr";    else if ("video/mp4".equals(contentType))      fileEndWitsh = ".mp4";    else if ("video/mpeg4".equals(contentType))      fileEndWitsh = ".mp4";    return fileEndWitsh;  }  /**   * 获取媒体文件   * @param accessToken 接口访问凭证   * @param mediaId 媒体文件id   * @param savePath 文件在本地服务器上的存储路径   * */  public static String downloadMedia(String accessToken, String mediaId, String savePath) {    try {      accessToken = DloadImgUtil.getAccessToken();    } catch (IOException e) {      e.printStackTrace();    }    String filePath = null;    // 拼接请求地址    String requestUrl = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID";    requestUrl = requestUrl.replace("ACCESS_TOKEN", accessToken).replace("MEDIA_ID", mediaId);    try {      URL url = new URL(requestUrl);      HttpURLConnection conn = (HttpURLConnection) url.openConnection();      conn.setDoInput(true);      conn.setRequestMethod("GET");      if (!savePath.endsWith("/")) {        savePath += "/";      }      // 根据内容类型获取扩展名      String fileExt = DloadImgUtil .getFileexpandedName(conn.getHeaderField("Content-Type"));      // 将mediaId作为文件名      filePath = savePath + mediaId + fileExt;      BufferedInputStream bis = new BufferedInputStream(conn.getInputStream());      FileOutputStream fos = new FileOutputStream(new File(filePath));      byte[] buf = new byte[8096];      int size = 0;      while ((size = bis.read(buf)) != -1)        fos.write(buf, 0, size);      fos.close();      bis.close();      conn.disconnect();      String info = String.format("下载媒体文件成功,filePath=" + filePath);      System.out.println(info);    } catch (Exception e) {      filePath = null;      String error = String.format("下载媒体文件失败:%s", e);      System.out.println(error);    }    return filePath;  }  /***      * 获取acess_token       * 来源www.vxzsk.com      * @return      */     public static String getAccessToken(){            String appid="你公众号基本设置里的应用id";//应用ID            String appSecret="你公众号基本设置里的应用密钥";//(应用密钥)            String url ="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+appSecret+"";            String backData=DloadImgUtil.sendGet(url, "utf-8", 10000);            String accessToken = (String) JSONObject.fromObject(backData).get("access_token");              return accessToken;     }     /***         * 模拟get请求         * @param url         * @param charset         * @param timeout         * @return         */         public static String sendGet(String url, String charset, int timeout)          {            String result = "";            try            {              URL u = new URL(url);              try              {                URLConnection conn = u.openConnection();                conn.connect();                conn.setConnectTimeout(timeout);                BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), charset));                String line="";                while ((line = in.readLine()) != null)                {                  result = result + line;                }                in.close();              } catch (IOException e) {                return result;              }            }            catch (MalformedURLException e)            {              return result;            }            return result;          }}

效果图如下:

选择图片弹出的图片详情

上传成功后返回的serverId

关于"微信开发中如何实现微信jsapi选择图片,上传图片,预览和下载图片的方法"这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

0