在Vue中調用微信上傳圖片功能

在Vue中調用微信上傳圖片功能

效果

說明

• 後臺微信參數獲取（略）

上傳流程

1. 點擊圖片控件位置，進行選擇圖片
2. 選擇相機拍照或圖庫上傳
3. 上傳完成顯示到圖片控件

開發流程

1. 引入weixin插件
2. 頁面初始化時獲取微信認證參數【參數後臺服務提供】，獲取本頁地址
3. 圖片點擊事件進行圖片上傳、圖片回顯操作
4. 後臺從微信服務器中下載上傳的圖片到自己的服務器

代碼

• vue中引入weixin插件

   

  npm install weixin-js-sdk --save
  

• 頁面圖片控件

   

  <img :src="imgURL" style="width: 90px;height: 90px" @click="addVipImage()"/>
  

• 數據

   

  data() {
    return {
      URL: '',
      serverPrefix: "後臺獲取微信參數的接口地址?url=",
      imgURL: '',
    }
  },
  

• 掛載方法中獲取本頁地址及初始化微信參數

   

  mounted: function () {
    //獲取本頁地址
    this.URL = location.href.split("#")[0];
    //獲取微信參數
    this.wxConfig();
  },
  

   

  wxConfig() {
      let self = this;
      let url = this.serverPrefix + this.URL;
      this.$ajax.post(url).then(
        function (data) {
          if (data.status == 200) {
            var jsondata = data.data;
            //【注-------------這裏根據自己後臺的返回的數據做相應的調整---------------】
            if (jsondata.code === 200) {
              wx.config({
                // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時纔會打印。
                debug: false,
                // 必填，公衆號的唯一標識
                appId: jsondata.model.appId,
                // 必填，生成簽名的時間戳
                timestamp: "" + jsondata.model.timestamp,
                // 必填，生成簽名的隨機串
                nonceStr: jsondata.model.nonceStr,
                // 必填，簽名
                signature: jsondata.model.signature,
                // 必填，需要使用的JS接口列表
                jsApiList: [
                  "chooseImage", //拍照或從手機相冊中選圖接口
                  "previewImage", //預覽圖片接口
                  "uploadImage", //上傳圖片接口
                  "downloadImage" //下載圖片接口
                ]
              });
            }
          }
        },
        function (data) {
          var jsondata = data.body;
        }
      );
    },
  

• 點擊圖片上傳事件

   

    addVipImage: function () {
      let self = this;
      wx.chooseImage({
        count: 1, //張數， 默認9
        sizeType: ["compressed"], //建議壓縮圖
        sourceType: ["album", "camera"], // 來源是相冊、相機
        success: function (res) {
          self.imgURL = res.localIds[0];
          self.uploadToWeixinServer(res.localIds[0]);
        }
      });
    },
  

   

    uploadToWeixinServer(localId) {
      let self = this;
      wx.uploadImage({
        localId: localId,
        isShowProgressTips: 1, // 默認爲1，顯示進度提示
        success: function (res) {
          //res.serverId 返回圖片的微信服務器端ID
          self.add_vip.serverId = res.serverId;
        }
      });
    },
  

• 後臺從微信服務器上下載上傳的圖片

   

  import java.io.FileOutputStream;
  import java.io.IOException;
  import java.io.InputStream;
  import java.net.HttpURLConnection;
  import java.net.URL;
  
  public class WeixinImageUtils {
      public static String saveImageToDisk(String accessToken,String mediaId, String picName, String picPath) throws Exception {
          InputStream inputStream = getInputStream(accessToken, mediaId);
          // 循環取出流中的數據
          byte[] data = new byte[1024];
          int len = 0;
          FileOutputStream fileOutputStream = null;
          String filePath = picPath + picName + ".jpg";
  
          try {
              fileOutputStream = new FileOutputStream(filePath);
              while ((len = inputStream.read(data)) != -1) {
                  fileOutputStream.write(data, 0, len);
              }
          } catch (IOException e) {
          } finally {
              if (inputStream != null) {
                  try {
                      inputStream.close();
                  } catch (IOException e) {
                  }
              }
              if (fileOutputStream != null) {
                  try {
                      fileOutputStream.close();
                  } catch (IOException e) {
                  }
              }
          }
          return filePath;
      }
  
      private static InputStream getInputStream(String accessToken, String mediaId) {
          InputStream is = null;
          String url = "http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=" + accessToken + "&media_id=" + mediaId;
          try {
              URL urlGet = new URL(url);
              HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
              http.setRequestMethod("GET"); // 必須是get方式請求
              http.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
              http.setDoOutput(true);
              http.setDoInput(true);
              System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 連接超時30秒
              System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 讀取超時30秒
              http.connect();
              // 獲取文件轉化爲byte流
              is = http.getInputStream();
          } catch (Exception e) {
          }
          return is;
      }
  }