基于 muse-ui 封装一个微信公众号上传插件 实现多图上传

 Vue.component('my-wx-upload', {
     template: `
     <mu-grid-list :cols="3" :cellHeight="90">
       <mu-grid-tile titleBarClass v-for="img, index in readyUploadImages" :key="index">
         <img :src="img" @click="preview(img)"/>
         <div slot="action">
           <i @click="remove(index)" class="iconfont icondelete" style="color: white;font-size: 2em;"></i>
         </div>
       </mu-grid-tile>
       <mu-grid-tile v-show="uploadIsFull" hideTitleBarClass>
         <img @click="add"  imgAdd
              src="/assets/public/wx/cms/img/add.jpg"/>
       </mu-grid-tile>
     </mu-grid-list>
 `,
     props: {
         imgList: {type: Array},
         chooseImage: {type: Number, default: 9},
     },
     data() {
         return {
             readyUploadImages: []
         }
     },
     mounted() {
         this.readyUploadImages = this.imgList
     },
     methods: {
         remove(index) {
             this.readyUploadImages.splice(index, 1)
         },
         add() {
             wx.chooseImage({
                 count: this.oddchooseImageCount, // 最多可以选择的图片张数，默认9
                 sizeType: ['original'], // original 原图，compressed 压缩图，默认二者都有
                 sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
                 success: res => {
                     this.readyUploadImages = this.readyUploadImages.concat(res.localIds);
                     // myUpImageBlock
                 },
                 fail: function () {
                     // fail
                 },
                 complete: function () {
                     // complete
                 }
             })
         },
         preview(img) {
             wx.previewImage({
                 current: img, // 当前显示图片的http链接
                 urls: this.readyUploadImages // 需要预览的图片http链接列表
             });
         }
     },
     computed: {
         oddchooseImageCount() {
             return this.chooseImage - this.readyUploadImages.length;
         },
         uploadIsFull() {
             return this.readyUploadImages.length !== this.chooseImage
         }
     },
     watch: {
         readyUploadImages(val) {
             this.$emit('update:imgList', val)
         }
     }
 });

调用方法

<my-wx-upload :img-list.sync="传入一个数组"></my-wx-upload>

上传方法

WxUploadImage(imgList) {
            return new Promise((resolve, reject) => {
                if (imgList && imgList instanceof Array && imgList.length > 0) {
                    let promiseList = [];
                    for (let i = 0; i < imgList.length; i++) {
                        promiseList[i] = new Promise((resolve, reject) => {
                            wx.uploadImage({
                                localId: imgList[i],
                                success: res => {
                                    resolve(res.serverId);
                                },
                                fail: error => {
                                    reject(error);
                                }
                            })
                        });
                    }
                    Promise.all(promiseList)
                        .then(result => {
                            resolve(result);
                        })
                        .then(error => {
                            reject(error);
                        })
                } else {
                    reject('传参有误，请传数组格式');
                }
            })
        }

　　调用方法

 this.WxUploadImage(this.imageList).then(res => {

                });