微信授权上传图片

html:

<div class="form-input sbox_c vue-uploader" v-if="type =='形象照'">
            <label>形象照</label>
            <section class="file-item" v-if="imgUrl2  ==''">
                    <div @click="chooseWXImage(2)" class="add">
                        <span>+</span>
                    </div>
                </section>
            <section class="file-item draggable-item" v-else>
                <img :src="imgUrl2" alt="" id="previewImage" @click="previews(imgUrl2)"> <span v-show="isreadonly"
                    class="file-remove" @click="remove(2)">+</span>
            </section>
            
            <!-- <p v-if="imgUrl2 != ''">先删除再上传图片</p> -->
        </div>

js

methods: {
      // 点击调用微信
      chooseWXImage: function (type) {
                let _this = this;
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        // 判断 ios 
                        if (window.__wxjs_is_wkwebview) {
                            for (var i = 0; i < localIds.length; i++) {
                                wx.getLocalImgData({
                                    localId: localIds[i], // 图片的localID
                                    success: function (res) {
                                        let localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                    }
                                });
                            }
                        } else {
                            // localIds.forEach((item, index) => {
                            //  _this.imgLenght = false
                            // });
                        }
                        _this.wxuploadImage(localIds, type);
                    },
                    fail: function (res) {
                        mui.toast("失败");
                    }
                });
            },
          // 上传图片到微信
         wxuploadImage(localIds, type) {
                var i = 0;
                let _this = this;
                var upload = function () {
                    let loacId = localIds[i];
                    if (window.__wxjs_is_wkwebview) {
                        if (loacId.indexOf("wxlocalresource") != -1) {
                            loacId = loacId.replace("wxlocalresource", "wxLocalResource");
                        }
                    }
                    wx.uploadImage({
                        localId: loacId, // 需要上传的图片的本地ID，由chooseImage接口获得
                        isShowProgressTips: 1, // 默认为1，显示进度提示
                        success: function (res) {
                            _this.serverId = res.serverId;
                            _this.getImgUrl(_this.serverId, type)
                        },
                        fail: function (error) {
                            mui.toast("失败");
                        }
                    });
                }
                upload();
            },
         //将serverId传到后台，返回图片路径
         getImgUrl(id, type) {
                var _self = this;
                if(browserType =='qywx'){
                    var url='sys/cpWx/fileUpload'
                }else{
                    var url='sys/wx/fileUpload'
                }              
                $$.ajax({
                    method: "POST",
                    url: Utils.urls + url,
                    data: {
                        mediaIds: id,
                    },
                    success: function (rst) {
                        if (rst.code == 200) {
                            var t = rst.data;
                            if (type == 1) {
                                _self.imgUrl1 = t[0]
                            } else if (type == 2) {
                                _self.imgUrl2 = t[0]
                            } else if (type == 3) {
                                _self.imgUrl3 = t[0]
                            }
                        }else{
                            mui.toast(rst.message);
                        }
                    }
                })
            },
          //删除图片
           remove(type) {
                var _self = this
                if (type == 1) {
                    _self.imgUrl1 = ''
                } else if (type == 2) {
                    _self.imgUrl2 = ''
                } else if (type == 3) {
                    _self.imgUrl3 = ''
                }
            },
            //预览图片
            previews: function (url) {
                wx.previewImage({
                    current: url, // 当前显示图片的http链接
                    urls: [url] // 需要预览的图片http链接列表
                });
            },
}

当然调用微信上传图片的前提是得到微信签名授权

$.post(Utils.prefixUrl_wx + "wxConfig", {"url": encodeURIComponent(window.location.href)}, 
    function (r) {
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: r.data.param.appId, // 必填，公众号的唯一标识
            timestamp: r.data.param.timestamp, // 必填，生成签名的时间戳
            nonceStr: r.data.param.nonceStr, // 必填，生成签名的随机串
            signature: r.data.param.signature, // 必填，签名
            jsApiList: ['previewImage', 'chooseImage', 'uploadImage',
                'downloadImage', 'getLocalImgData'
            ], // 必填，需要使用的JS接口列表
            beta: true
        });
         wx.error(function (res) {
             alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
         });
    })