vue 微信上传图片接口

<template>
    <div class="uploadCont">
        <ul class="showImage">
            <li @click="chooseImage">
                <img src="../assets/images/tu_04.jpg"/>
            </li>
            <li @click="previewImage(saveImages.previewImageList[index])"
                v-for="(item,index) in saveImages.previewThumbList">
                <img :src="item"/>
                <i class="icon iconfont icon-shanchu remove" @click.stop @click="remove(index)"></i>
            </li>
        </ul>
    </div>
</template>

js

<script>
    var wx = require('weixin-js-sdk');
    export default {
        data() {
            return {
                userCode: localStorage.userCode || '',//用户code
                images: {
                    localId: [], //已选择的本地图片
                    serverId: [] //微信服务器返回的mediaId
                },
                saveImages: {
                    previewImageList: [], //预览大图数组,
                    previewThumbList: [], //预览缩略图数组
                    saveImageList: [], //预览大图数组//保存图片
                },
                uploadPath: '' //图片上传的路径：为空时，默认下载到当前项目的/mcupload路径下
            }
        },
        methods: {
            /**
             * 选择图片
             */
            chooseImage() {
                let _this = this
                wx.chooseImage({
                    success: function (res) {
                        //res.localIds 是一个数组　保存了用户一次性选择的所有图片的信息　
                        _this.images.localId = res.localIds;//把图片的路径保存在images[localId]中--图片本地的id信息，用于上传图片到微信浏览器时使用
                        //alert('已选择 ' + res.localIds.length + '张图片 ');
                        //===上传
                        let length = res.localIds.length
                        if (length == 0) {
                            _this.$alert("请选择图片");
                            return;
                        }
                        var i = 0

                        _this.images.serverId = []

                        function upload() {
                            wx.uploadImage({
                                localId: _this.images.localId[i],
                                success: function (res) {
                                    i++;
                                    _this.images.serverId.push(res.serverId);
                                    //下载刚刚上传的图片
                                    JssdkService.getMediaByUser(res.serverId, _this.uploadPath, _this.userCode, function (res) {
                                        //  alert(res.substr(45));
                                        var path = res.responseParam1.split("mecwish")[1];
                                        var path_thumb = path.replace("/mcupload/", "/mcupload/_thumb/");
                                        if (path != null && path.length != 0) {
                                            _this.saveImages.saveImageList.push(path);
                                            _this.saveImages.previewImageList.push(window.location.protocol + "//" + window.location.host + '/mecwish' + path);//将图片上传的位置
                                            _this.saveImages.previewThumbList.push(window.location.protocol + "//" + window.location.host + '/mecwish' + path_thumb);//将缩略图上传的位置
                                        }
                                    })

                                    if (i < length) {
                                        upload();
                                    }
                                },
                                fail: function (res) {
                                    alert(JSON.stringify(res));
                                }
                            });
                            _this.$emit('saveImages', _this.saveImages.saveImageList)
                        }

                        upload();
                    }
                });
            },
            //预览图片
            previewImage(currentImg) {
                let _this = this
                wx.previewImage({
                    current: currentImg,//当前图片
                    urls: _this.saveImages.previewImageList
                });
            },
          //删除图片，数据库里没删除
            remove(index) {
                this.$emit('removed', index)
                this.saveImages.saveImageList.splice(index, 1)
                this.saveImages.previewImageList.splice(index, 1)
                this.saveImages.previewThumbList.splice(index, 1)
            }
        },
        created() {
            let _this = this;
            let url = location.href.split('#')[0];
            let userCode = _this.userCode;
            _this.$emit('saveImages', _this.saveImages.saveImageList)
            JssdkService.getSignatureByUser(url, userCode, function (res) {
                if (res.responseCode != 0) {
                    _this.$alert(res.responseText);
                } else {
                    let signatureData = JSON.parse(res.responseText);
                    let timestamp = signatureData.timestamp;
                    let nonceStr = signatureData.nonceStr;
                    let signature = signatureData.signature;
                    let appId = res.responseParam1;
                    wx.config({
                        debug: false,
                        appId: appId,
                        timestamp: timestamp,
                        nonceStr: nonceStr,
                        signature: signature,
                        jsApiList: [
                            'checkJsApi',
                            'onMenuShareAppMessage',
                            'chooseImage',
                            'previewImage',
                            'uploadImage',
                            'downloadImage'
                        ]
                    });

                    wx.error(function (res) {
                        this.$alert(res.errMsg);
                    });
                }

            });

        }
    }
</script>

css

<style scoped>
    .uploadCont .showImage {
        display: flex;
        list-style: none;
        flex-wrap: wrap;
        margin: 7px 0 5px 10px;
    }

    .uploadCont .showImage li {
        position: relative;
        width: 28vw;
        height: 28vw;
        list-style: none;
        /*background: #f00;*/
        margin: 5px 2vw 7px 0;
    }

    .uploadCont .showImage .remove {
        z-index: 11;
        position: absolute;
        top: -14px;
        right: -20px;
        font-size: 26px
    }

    .uploadCont .showImage img {
        width: 28vw;
        height: 28vw;
    }
</style>