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