封装微信公众号上传照片方法

1、微信公众号上传照片方法 wxPic.js

// 弹出提示消息的组件
import { Toast } from "vant";
// 微信JS-SDK文件，微信开发者官方有
import "./wx.js";
import axios from 'axios';
// 选照、拍照权限
export function WXJSSDKValidate(PicArray, picIds, paramsObj, n) {
    paramsObj.count++;
    wx.chooseImage({
        count: n, // 默认9
        sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function (response) {
            if (PicArray.length + response.localIds.length > n) {
                Toast('图片数量不能大于 ' + n + ' 张')
                return
            }
            // 选择照片和拍照确定时在此处
            GetWeiXinImages(response, PicArray, picIds, paramsObj);
        }
    });
}
// 获取照片
async function GetWeiXinImages(resData, PicArray, picIds, paramsObj) {
    let localIds = resData.localIds;
    var uploadCount = 0;
    var localIdLength = localIds.length;
    var uploadImg = (paramsObj, PicArray, picIds) => {
        PicArray.push({ PID: localIds[uploadCount], Value: localIds[uploadCount] });
        //上传微信服务器
        wx.uploadImage({
            localId: localIds[uploadCount], // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: function (res) {
                //添加资源ID到 集合
                uploadCount++;
                paramsObj.weixinId.push(res.serverId)
                if (uploadCount < localIdLength) {
                    uploadImg(paramsObj, PicArray, picIds);
                }
                //上传自己服务器
                axios.get(`自己服务器上传接口路径` + res.serverId)
                    .then(response => {
                        if (response.data.code == 0) {
                            let data = response.data.data;
                            picIds.push(data)
                            if (picIds.length == paramsObj.weixinId.length) {
                                paramsObj.tempArray = [];
                                return PicArray, picIds
                            }
                        }
                    })
                    .catch(err => {
                        // reject(err)
                    })
            }
        });
    }
    uploadImg(paramsObj, PicArray, picIds);
}

2、调用文件test.js:

<template>
	<div>
		<van-field
			readonly
			label="照片："
			@click-icon="SelectPhoto"
			icon="photograph"
			@click="SelectPhoto"
		/>
		<div class="imgBox">
			<span
				class="spanBox"
				v-for="(item, index) in PhotoArray"
				:key="index"
			>
				<img :src="item.Value" />
				<van-icon
					name="close"
					@click="CloseSelectImg(
							index,
							PhotoArray,
							PhotoImgIds
					)"/>
			</span>
		</div>
	</div>
</template>
<script>
import './wx.js'
import Url from '../../utils/url'
import { WXJSSDKValidate } from './wxPic'
export default {
	data() {
		return {
			PhotoArray: [],//页面显示集合
			PhotoImgIds: [],//上传后返回路径集合
			paramsObj:{
				count:0,
				tempArray:[],
				weixinId:[],
				tempIndex:0
			}
		}
	},
	// 获取微信相关
	beforeMount() {
		this.$get(
			Url.wechat_v1_jssdk_validate +
				`?url=${encodeURIComponent(window.location.href)}`
		).then((res) => {
			if (res.code == 0) {
				wx.config({
					debug: false, 
					// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，
					//可以在pc端打开，参数信息会通过log打出，仅在pc端时才会制作。
					appId: res.data.appId, // 必填，公众号的唯一标识
					timestamp: res.data.timestamp, // 必填，生成签名的时间戳
					nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
					signature: res.data.signature, // 必填，签名，见附录
					jsApiList: ['chooseImage', 'uploadImage'],
					// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				})
			} else if (res.code == -1) {
				console.log(res)
			}
		})
	},
	methods: {
		// 选拍照片
		SelectPhoto() {
			if (this.PhotoArray.length == 3) {
				Toast('只能选择3张图片')
				return
			}
			WXJSSDKValidate(
				this.PhotoArray,
				this.PhotoImgIds,//路径
				this.paramsObj,
				3
			)
		},
		// 点击删除照片
		CloseSelectImg(index, PhotoArray, ImgIDs) {
			Dialog.confirm({
				title: '',
				message: '确认删除此照片？',
			})
				.then(() => {
					PhotoArray.splice(index, 1)
					PhotoImgIds.splice(index, 1)
				})
				.catch(() => {
					// on cancel
				})
		},
		Submit() {
			console.log(PhotoImgIds);
		},
	}
}
</script>