H5微信开发-图片上传

官方api传送门

实现方法

<div class='uploaderBox'>
   <div class='uploadlistbox'>
       <div v-for="(item,index) in imgArr" :key="index" class="uploadlist" @click.stop='previewImg(index)'>
           <img :src="item">
           <i><img class='del' @click.stop='delImgIcon(index)' :src="delIcon" alt=""></i>
       </div>
       <div class="uploadlistbox_wrp" @click.stop="chooseImage"></div>
   </div>
</div>

<script>
	import wx from 'weixin-js-sdk';
	export default {
		data() {
	        return {
	            fileList: [],
	            fileListUpload: [],
	            upload:require('../../common/images/charity/add.png'),
	            rightIcon:require('../../common/images/charity/right.png'),
	            delIcon:require('../../common/images/charity/delete.png'),
	            isDonating:false,
	            imgArr:[],
	            imgMaxCount:5
	        };
	    },
    }
    methods: {
		chooseImage() {
	            let that = this;
	            console.log(this.imgArr)
	            if(this.imgArr.length>5||this.imgArr.length==5){
	                this.$toast(`最多只能上传${this.imgMaxCount}张图片`)
	                return;
	            }
	            wx.ready(()=>{
	                wx.checkJsApi({
	                    jsApiList: ['chooseImage', 'getLocalImgData'],
	                    success: function(res){
	                        if (res.checkResult.chooseImage) {
		                        wx.chooseImage({
		                            count: that.imgMaxCount,
		                            sizeType: ['compressed'],
		                            sourceType: ['album', 'camera'],
		                            success:function(req){
		                                let localIds = req.localIds;
		                                that.readImages(localIds)
		                            }
		                        });
	                        } else {
	                            that.$toast('请刷新页面')
	                        }
	                    },
	                    fail: function(err) {
	                        that.$toast('请刷新页面')
	                    },
	                    });
	            });
	        },
	        async readImages(localIds) {
	            for (var i = 0; i < localIds.length; i++) {
	                await this.doreadImage(localIds[i]);
	            }
	        },
	        doreadImage(item) {
	            let that =this;
	            return new Promise(resolve => {
	                wx.getLocalImgData({
	                    localId: item,
	                    success:function(res) {
	                        let localData = res.localData;
	                        let data = '';
	                        if (localData.indexOf('data:image') == 0) {
	                            //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
	                            data = localData;
	                        } else {
	                            //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
	                            //此时一个正常的base64图片路径就完美生成赋值到img的src中了
	                            data = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
	                        }
	                            that.imgArr.push(data)
	                            if(that.imgArr.length>that.imgMaxCount){
	                                that.imgArr.splice(that.imgMaxCount,that.imgArr.length-that.imgMaxCount);
	                            }
	                            let transfterFile=that.dataURLtoFile(data)
	                            that.fileList.push(transfterFile)
	                            if(that.fileList.length>that.imgMaxCount){
	                                that.$toast(`最多只能上传${that.imgMaxCount}张图片`)
	                                that.fileList.splice(that.imgMaxCount,that.fileList.length-that.imgMaxCount);
	                            }
	                        resolve("done!");
	                    },
	                    fail:function(err) {
	                        window.console.error(err);
	                    }
	                });
	            });
	        },
        }
</script>

invalid signature问题

wx.config 多次调用 会导致第二次调用出现invalid signature

官方文档已经标明：

解决方法：

1. config一次
2. 设置定时器绕，500ms后再触发

chooseImg:permission denied问题

排查顺序：

1. 签名是否有效
2. wx.config 申请chooseImage是否成功 ，checkJsApi只是说明客户端有这个jsapi，是否有权限是看wx.config的回调结果

getLocalImgData在循环中未执行回调方法

微信社区关于这个问题的传送门 按上边贴的代码就可以解决

dataURLtoFile方法

dataURLtoFile 传送门