DIV CSS 佈局教程網

最近做的一個項目剛好用到微信js-sdk的圖片上傳接口，在這裡做一下總結。

在這裡能知道使用js api的基本配置

https://mp.weixin.qq.com/wiki

t=resource/res_main&id=mp1421141115&token=&lang=zh_CN

我這裡沒有用checkJsApi去判斷當前客戶端版本是否支持指定JS接口，好。通過看開發文檔，我們知道調用js接口直接都要通過config接口注入權限驗證配置

<code class="hljs cs">wx.config({
  debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
  appId: '', // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名，見附錄1
  jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});</code>

獲取config裡面參數的代碼如下，我這裡只用到chooseImage和uploadImage接口，chooseImage接口是拍照或從手機相冊中選圖接口，uploadImage接口是用來上傳圖片，所以jsApiList裡面只寫這兩個就可以了

<code class="hljs avrasm">import java.util.UUID;
import java.util.Map;
import java.util.HashMap;
import java.util.Formatter;
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.io.UnsupportedEncodingException;
 
public class WxConfig {
  public static void main(String[] args) {
    String jsapi_ticket = "jsapi_ticket";
 
    // 注意 URL 一定要動態獲取，不能 hardcode
    String url = "http://example.com";
    Map<string, string=""> ret = sign(jsapi_ticket, url);
    for (Map.Entry entry : ret.entrySet()) {
      System.out.println(entry.getKey() + ", " + entry.getValue());
    }
  };
 
  public static Map<string, string=""> sign(String jsapi_ticket, String url) {
    Map<string, string=""> ret = new HashMap<string, string="">();
    String nonce_str = create_nonce_str();
    String timestamp = create_timestamp();
    String string1;
    String signature = "";
 
    //注意這裡參數名必須全部小寫，且必須有序
    string1 = "jsapi_ticket=" + jsapi_ticket +
        "&noncestr=" + nonce_str +
        "×tamp=" + timestamp +
        "&url=" + url;
    System.out.println(string1);
 
    try
    {
      MessageDigest crypt = MessageDigest.getInstance("SHA-1");
      crypt.reset();
      crypt.update(string1.getBytes("UTF-8"));
      signature = byteToHex(crypt.digest());
    }
    catch (NoSuchAlgorithmException e)
    {
      e.printStackTrace();
    }
    catch (UnsupportedEncodingException e)
    {
      e.printStackTrace();
    }
 
    ret.put("url", url);
    ret.put("jsapi_ticket", jsapi_ticket);
    ret.put("nonceStr", nonce_str);
    ret.put("timestamp", timestamp);
    ret.put("signature", signature);
 
    return ret;
  }
 
  private static String byteToHex(final byte[] hash) {
    Formatter formatter = new Formatter();
    for (byte b : hash)
    {
      formatter.format("%02x", b);
    }
    String result = formatter.toString();
    formatter.close();
    return result;
  }
 
  private static String create_nonce_str() {
    return UUID.randomUUID().toString();
  }
 
  private static String create_timestamp() {
    return Long.toString(System.currentTimeMillis() / 1000);
  }
}
</string,></string,></string,></string,></code>

ticket可以通過accessToken獲取，代碼如下

<code class="hljs cs">public static String getTicket(String accessToken) throws ParseException, IOException {
    public final static String sign_ticket_create_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
    JSONObject jsonObject = new JSONObject();
    JSONObject postjson=new JSONObject();
    String ticket =null;
    String url = sign_ticket_create_url.replace("ACCESS_TOKEN",accessToken);
    System.out.print("url="+url);
    String ticketurl ="";
    try {
      jsonObject = WeixinUtil.httpsRequest(url, "POST",postjson.toString());
      ticket= jsonObject.getString("ticket");
      System.out.println("ticket:"+ticket);
    }catch (Exception e) {
      e.printStackTrace();
    }
    return ticket;
  };</code>

當注入權限驗證成功的時候會進入ready接口，那麼我們就在ready接口裡面繼續我們需要的操作

<code class="hljs javascript">wx.ready(function(){
    //拍照或從手機相冊中選圖接口
    wx.chooseImage({
      count: 1, // 最多能選擇多少張圖片，默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        var localIds = res.localIds; // 返回選定照片的本地ID列表，localId可以作為img標簽的src屬性顯示圖片
        //上傳圖片接口
        wx.uploadImage({
          localId: localIds.toString(), // 需要上傳的圖片的本地ID，由chooseImage接口獲得
          isShowProgressTips: 1, // 默認為1，顯示進度提示
          success: function (res) {
            var serverId = res.serverId; // 返回圖片的服務器端ID
          }
        });
      }
    });
  });</code>

通過以上代碼，我們就已經把圖片上傳到微信服務器了，但是我們上傳到微信服務器的圖片只能保存3天，所以上傳完之後我們要把圖片下載到我們的本地服務器，這裡用到微信下載多媒體接口

http://file.api.weixin.qq.com/cgi-bin/media/get?

access_token=ACCESS_TOKEN&media_id=MEDIA_ID

其中media_id就是我們上面的serverId ，所以我們就可以把圖片下載到本地了，代碼如下

<code class="hljs java">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.URL;
import java.net.URLConnection;
 
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 = WeixinUtil.getAccessToken1().getToken();
  } 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;
 }
}
</code>

這樣就完成了js-sdk圖片上傳下載了。

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！