微信公众号上传图片封装

处理思路：

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, // 必填，签名，见附录1

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);

 

转载于:https://www.cnblogs.com/sdbq/p/11251179.html