Home > Article > WeChat Applet > WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

高洛峰Original: 2017-03-26 14:15:574429browse

Parameters

	Description
appId	The unique identifier of the official account Apply id
timestamp	Generate signed timestamp
nonceStr	Generate signed random string
signature	signature

The four parameters in the above table are the credentials for initializing the WeChat jsapi call. We have repeatedly explained how to use it in the previous sections, so we will not post how to generate the above four parameters here.

The complete jsp code is as follows:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>微信jsapi测试-V型知识库</title>
    <meta name="viewport" content="width=320.1,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
   <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"> </script> 
<scriptsrc="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
  </head>
  <body>
  <center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
     <p>基础接口之判断当前客户端是否支持指定的js接口</p>   
     <input type="button" value="checkJSAPI" id="checkJsApi"><br>
      <h3 id="menu-image">图像接口</h3>
      <span class="desc">拍照或从手机相册中选图接口</span><br>
      <button class="btn btn_primary" id="chooseImage">chooseImage</button><br>
      <span class="desc">预览图片接口</span><br>
      <button class="btn btn_primary" id="previewImage">previewImage</button><br>
      <span class="desc">上传图片接口</span><br>
      <button class="btn btn_primary" id="uploadImage">uploadImage</button><br>
      <span class="desc">下载图片接口</span><br>
      <button class="btn btn_primary" id="downloadImage">downloadImage</button><br>
  显示图片<imgalt=""src=""id="faceImg"data-bd-imgshare-binded="1">
  <br>
  <script type="text/javascript">
  wx.config({  
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
    appId: &#39;${appId}&#39;, // 必填，公众号的唯一标识  
    timestamp: &#39;${ timestamp}&#39; , // 必填，生成签名的时间戳  
    nonceStr: &#39;${ nonceStr}&#39;, // 必填，生成签名的随机串  
    signature: &#39;${ signature}&#39;,// 必填，签名，见附录1  
    jsApiList: [&#39;checkJsApi&#39;,
                &#39;chooseImage&#39;,
                &#39;previewImage&#39;,
                 &#39;uploadImage&#39;,
                 &#39;downloadImage&#39;
               ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});  
wx.ready(function(){  
    // 5 图片接口
  // 5.1 拍照、本地选图
  var images = {
    localId: [],
    serverId: []
  };
  document.querySelector(&#39;#chooseImage&#39;).onclick = function () {
    wx.chooseImage({
      success: function (res) {
        images.localId = res.localIds;
        alert(&#39;已选择 &#39; + res.localIds.length + &#39; 张图片&#39;);
$("#faceImg").attr("src", res.localIds[0]);//显示图片到页面上
      }
    });
  };
  // 5.2 图片预览
  document.querySelector(&#39;#previewImage&#39;).onclick = function () {
    wx.previewImage({
      current: &#39;http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;,
      urls: [
        &#39;http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;,
        &#39;http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;,
        &#39;http://www.vxzsk.com/upload//bf04c9b5-5699-421d-900e-3b68bbe58a8920160816.jpg&#39;
      ]
    });
  };
  // 5.3 上传图片
  document.querySelector(&#39;#uploadImage&#39;).onclick = function () {
    if (images.localId.length == 0) {
      alert(&#39;请先使用 chooseImage 接口选择图片&#39;);
      return;
    }
    var i = 0, length = images.localId.length;
    images.serverId = [];
    function upload() {
      wx.uploadImage({
        localId: images.localId[i],
        success: function (res) {
          i++;
          //alert(&#39;已上传：&#39; + i + &#39;/&#39; + length);
          images.serverId.push(res.serverId);
          if (i < length) {
            upload();
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    upload();
  };
  // 5.4 下载图片
  document.querySelector(&#39;#downloadImage&#39;).onclick = function () {
    if (images.serverId.length === 0) {
      alert(&#39;请先使用 uploadImage 上传图片&#39;);
      return;
    }
    var i = 0, length = images.serverId.length;
    images.localId = [];
    function download() {
      wx.downloadImage({
        serverId: images.serverId[i],
        success: function (res) {
          i++;
          alert(&#39;已下载：&#39; + i + &#39;/&#39; + length);
          images.localId.push(res.localId);
          if (i < length) {
            download();
          }
        }
      });
    }
    download();
  };
});  
 //初始化jsapi接口 状态
wx.error(function (res) {
  alert("调用微信jsapi返回的状态:"+res.errMsg);
});
 </script>
  </body>
</html>

1, the above code html button code function has been described very clearly , each time a button is clicked, a js function is triggered.

2. Before clicking the upload image button, you must first click the select image button function. After the image is uploaded successfully, the serverid will be returned. So I think this is very silly. I call the WeChat jsapi upload interface. Where do I upload my images? What's up? In fact, we uploaded the pictures to the WeChat server, which are temporary materials. You can log in to the WeChat official management platform to view them. You can also call the WeChat temporary material interface to obtain the pictures.

3. Through the above code, we have uploaded the image to the WeChat server, but the image we uploaded to the WeChat server can only be saved for 3 days, so after uploading, we have to download the image to our local Server, the WeChat download multimedia interface is used here http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID where media_id is our serverId above , so we can download the image locally, the code is as follows

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;
          }
}

The rendering is as follows:

WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

Select the picture details that pop up

WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

The serverId returned after successful upload

WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

The above is the detailed content of WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the preliminary access method of WeChat jsapi and java developed by WeChatNext article：Detailed explanation of the preliminary access method of WeChat jsapi and java developed by WeChat

See more

WeChat jsapi development method for selecting pictures, uploading pictures, previewing and downloading pictures

Related articles