vue h5 手机端使用微信JSSDK(wx.chooseImage)多张照片上传

1.背景原因

// 手机浏览器使用HTML5 input的multiple属性不能多选？
// 微信浏览器 不支持 html5 multiple多文件上传选择，只能选择一个文件

2.思路及代码

<!-- 多张 -->
<div class="container">
    <h2>xxxx</h2>
    <p>xxxxxxxxxxxxxxxxxxxx</p>
    <div class="img_box">
        <div class="left_box" @click="boxClick('1')">
            <van-image width="150" height="75" :src="img1" />
            <div class="title_text">xxxxxx</div>
        </div>
        <div class="right_box" @click="boxClick('2')">
            <van-image width="150" height="75" :src="img2" />
            <div class="title_text">xxxxxxx</div>
        </div>
    </div>
    <van-popup v-model="show" round position="bottom" :style="{ height: '30%' }">
        <div class="clickBtn" @click="goToFilm('camera')">拍摄</div>
        <div class="clickBtn" @click="goToFilm('album')">从相册选择</div>
        <div class="clickBtn" @click="show = false">取消</div>
    </van-popup>
</div>

import { getwechatinfo } from "@/api/XXXXXXXXX";
let wx = require('weixin-js-sdk');

data() {
    return {
        show: false,//是否弹窗
        img1: 'XXXX',
        img2: 'XXXXXX',
        imgFlag: '',//点击的是哪张图片
        timer: null,
        localidArray: [],
        imgArray: [],
    }
},

created() {
    this.configWxApi();
},
methods: {
    async configWxApi() {
        let json = {
            url: location.href.split('#')[0]
        }
        let data = await getwechatinfo(json);

        wx.config({
            debug: true,
            appId: data.appid,
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名
            jsApiList: ['chooseImage', 'uploadImage', 'downloadImage', 'getLocalImgData'] //需要使用的接口列表
        });
        //config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        wx.ready(function () {
            alert("ready")
        });
        wx.error(function (res) {
            alert("失败了", res);
        });
    },
    boxClick(flag) {
        this.imgFlag = flag;
        if (this.isMobile() == '1') {//安卓系统时候才会调用自己的弹窗,ios有默认弹窗
            this.show = true;
        } else if (this.isMobile() == '2') {//苹果系统就直接调用方法,会有默认弹窗
            this.goToFilm(['camera', 'album']);
        }
    },
    isMobile() {
        var ua = navigator.userAgent,
            app = navigator.appVersion;
        var isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Linux") > -1;
        var isIOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (isAndroid) {
            return '1';
        }
        if (isIOS) {
            return '2';
        }
    },
    goToFilm(sourceType) {
        this.show = false;
        wx.chooseImage({
            count: 9, // 默认9
            sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有 ['original', 'compressed']
            sourceType: sourceType, // 可以指定来源是相册还是相机，默认二者都有 ['album', 'camera']
            success: (res) => {
                let locaIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img的src属性显示图片,但IOS WKWebview 不支持 localId 直接显示图片
                this.syncUpload(locaIds);
            },
            fail: (err) => {
                alert('chooseImage失败', err);
            },
            complete: () => {
                alert('chooseImage接口调用完成');
            }
        });
    },
    syncUpload(localIds) {
        var localId = localIds.pop();
        var self = this;
        wx.getLocalImgData({
            localId: localId, // 图片的localID
            success: function (resBackData) {
                var localData = resBackData.localData;
                // 判断是否有这样的头部
                if (localData.indexOf('data:image') != 0) {
                    localData = 'data:image/jpeg;base64,' + localData;
                }

                // localData是经过处理的base64编码的图片
                localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg');
                self.imgArray.push(localData);
                // console.log(self.convertFile(localData));
                // File {name: "文件名", lastModified: 1682320539842, path: "", lastModifiedDate: Mon Apr 24 2023 15:15:39 GMT+0800 (中国标准时间), webkitRelativePath: "", …}

                if (localIds.length > 0) {
                    self.syncUpload(localIds);
                } else {
                    console.log(self.imgArray);
                }
            }
        });
    },
    // base64 转binary
    convertFile(base64) {
        let fileArray = base64.split(','),
            //过滤出文件类型
            fileType = fileArray[0].match(/:(.*?);/)[1],
            //atob 是对经过 base-64 编码的字符串进行解码
            bstr = atob(fileArray[1]),
            n = bstr.length,
            //Uint8Array 数组类型表示一个 8 位无符号整型数组
            u8arr = new Uint8Array(n)
        while (n--) {
            // 返回字符串n个字符的 Unicode 编码
            u8arr[n] = bstr.charCodeAt(n)
        }
        //return new Blob([u8arr]，[ type: fileType 3)
        return new File([u8arr],'文件名',{ type: fileType });
    }
}

3.微信接口文档

可参考文档

4.测试环境