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:574286browse

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+"/";
%>


  
    
    微信jsapi测试-V型知识库
    
    

  

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

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


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

预览图片接口

上传图片接口

下载图片接口

显示图片

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

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

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