찾다

집 >위챗 애플릿 >위챗 개발 >사진 선택, 사진 업로드, 사진 미리보기 및 다운로드를 위한 WeChat jsapi 개발 방법

사진 선택, 사진 업로드, 사진 미리보기 및 다운로드를 위한 WeChat jsapi 개발 방법

高洛峰
高洛峰원래의
2017-03-26 14:15:574444검색

매개변수

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

위 표의 4개 매개변수는 WeChat jsapi 호출을 초기화하기 위한 자격 증명입니다. 이전 섹션에서 사용 방법을 반복해서 설명했습니다. 위의 4가지 매개변수를 생성합니다

완전한 jsp 코드는 다음과 같습니다.

<%@ 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. 위 코드의 html 버튼 코드의 기능을 설명했습니다. 매우 명확하게 버튼을 클릭할 때마다 js 기능이 실행됩니다.

2. 이미지 업로드 버튼을 클릭하기 전에 먼저 이미지 선택 버튼 기능을 클릭해야 합니다. 이미지가 성공적으로 업로드되면 서버 ID가 반환되므로 위챗을 호출하는 것은 매우 어리석은 일이라고 생각합니다. jsapi 업로드 인터페이스. 내 이미지를 어디에 업로드하나요? 실제로 임시 자료인 사진을 위챗 서버에 업로드했는데, 위챗 공식 관리 플랫폼에 로그인해 볼 수도 있고, 위챗 임시 자료 인터페이스를 호출해 사진을 얻을 수도 있습니다.

3. 위 코드를 통해 위챗 서버에 이미지를 업로드했는데, 위챗 서버에 업로드한 이미지는 3일 동안만 저장이 가능하기 때문에 업로드 후에는 이미지를 다운로드 받아야 합니다. 로컬 서버에 연결하려면 여기에서 WeChat 다운로드 멀티미디어 인터페이스가 사용됩니다. 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;
          }
}

렌더링은 다음과 같습니다.

사진 선택, 사진 업로드, 사진 미리보기 및 다운로드를 위한 WeChat jsapi 개발 방법

사진 선택, 사진 업로드, 사진 미리보기 및 다운로드를 위한 WeChat jsapi 개발 방법

이미지 선택 시 나타나는 이미지 상세정보

사진 선택, 사진 업로드, 사진 미리보기 및 다운로드를 위한 WeChat jsapi 개발 방법

사진 선택, 사진 업로드, 사진 미리보기 및 다운로드를 위한 WeChat jsapi 개발 방법

업로드 성공 후 반환된 서버 ID

사진 선택, 사진 업로드, 사진 미리보기 및 다운로드를 위한 WeChat jsapi 개발 방법

위 내용은 사진 선택, 사진 업로드, 사진 미리보기 및 다운로드를 위한 WeChat jsapi 개발 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：위챗에서 개발한 위챗 jsapi, java의 사전접속방법에 대한 자세한 설명다음 기사：위챗에서 개발한 위챗 jsapi, java의 사전접속방법에 대한 자세한 설명

관련 기사

더보기