Vue开发微信公众号上传图片

​

 处理思路：

1. 从服务器获取微信配置参数，进行微信配置
2. 选择本地图片，获取图片base64输出
3. 将base64图片转化为文件上传

 

关键代码：

1.获取配置与选择本地图片输出

import http from './http'
import api from './api'
import wx from "weixin-js-sdk";
export default {getConfig() {http.get(api.getWechatConfig, {url: window.location.href}).then(res => {if (res.code == 0) {var config = res.data;wx.config({appId: config.appId, // 必填，公众号的唯一标识timestamp: config.timestamp, // 必填，生成签名的时间戳nonceStr: config.nonceStr, // 必填，生成签名的随机串signature: config.signature, // 必填，签名jsApiList: ["checkJsApi", "chooseImage", "previewImage", "getLocalImgData"]});}});},selectImg(callback) {wx.chooseImage({count: 1,success(res) {var localid = res.localIds[0];wx.getLocalImgData({localId: localid,success(res) {var localData = res.localData;if (localData.indexOf("data:image") == 0) {localData = localData.replace("jgp", "jpeg");} else {localData = "data:image/jpeg;base64," + localData.replace(/\n/g, "");}callback(localData);}});}});}
}

2.将base64图片转为Bob

dataURItoBlob(dataURI) {var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型var byteString = atob(dataURI.split(',')[1]); //base64 解码var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组var intArray = new Uint8Array(arrayBuffer); //创建视图for (var i = 0; i < byteString.length; i++) {intArray[i] = byteString.charCodeAt(i);}return new Blob([intArray], {type: mimeString});
}

 3.使用multipart/form-data上传

var data = new FormData();
var bob = util.dataURItoBlob(localData);
data.append("hold_pic", bob);

记录于 2020-06-21