微信小程序之多张图片上传

最近在写基于mpvue小程序，需要多张图片的上传。因为小程序不支持数组的多张图片同时上传，然后根据自己的需求+面向百度开发，参考各位大神的案例，总算搞定。分享下，不足之处，多多指教

直接上代码吧

多张图片上传，点击预览图片，删除某一张图片

<template>
    <div class="editbig">
            <div class="cu-bar bg-white">
                <div class="action">File</div>
                <!-- <view class="action"> {{uploadList.length}}/4 </view> -->
            </div>
            <div class="cu-form-group">
                <div class="grid col-4 grid-square flex-sub uploadBox">
                    <view class="bg-img pic_box" v-for="(item, index) in uploadList" :key="index">
                        <image class="" :src='item' mode='aspectFill' @click="ViewImage(item, uploadList)"></image>
                        <view class="cu-tag bg-red" @click="DelImg(index)">
                            <text class="cuIcon-close"></text>
                        </view>
                    </view>
                    <div class="solids" @click="ChooseFile">
                        <div class="cuIcon-upload"> </div>
                        <div class="upload">upload</div>
                    </div>
                </div>
            </div>
        <!-- 图片上传时 loading -->
        <view class='cu-load load-modal' v-if="loadingModel">
            <view class='gray-text'>uploading</view>
        </view>
        <!-- 图片上传成功提升 success -->
        <view class='cu-load load-modal' v-if="successModel">
            <view class='gray-text'>Upload ok！</view>
        </view>
    </div>
</template>


<script>
export default {
    data(){
        return {
            loadingModel: false,
            successModel: false,
            form: {  // 表单数据
                note: '',
                file_path: '',
            },
            uploadImgLenght:0,
            uploadIndex:0,
            uploadList: [], // 图片列表
            header:{
                Authorization:'Bearer '+wx.getStorageSync('authToken')
            } ,
            rule:{     // 验证规则
                note: {message:'Please enter describe'},
                // file_path: {message:'Please choose to upload pictures'}
            },
        }
    },
    components: {},
    computed: {},
    methods: {
        // 选择图片
        ChooseFile() {
            wx.chooseImage({
                count: 9,    // 上传选择图片张数
                sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album', 'camera'], //可以指定来源是相册还是相机， 默认二者都有
                success: (res) => {
                    this.uploadIndex = 0;
                    this.uploadImgLenght = res.tempFilePaths.length;
                    this.upload(res.tempFilePaths)
                }
            })
        },
        // 上传图片到服务器
        upload(imgs){
            let that = this;
            // loading 模态框
            that.loadingModel = true;
            wx.uploadFile({
                url: that.$api.uploadFile,  // 接口地址
                filePath: imgs[that.uploadIndex], // 要上传文件的路径
                header: that.header,       // 请求头
                name: 'file',
                success(res){
                    let data = JSON.parse(res.data)
                        that.uploadIndex ++;
                        that.uploadList = that.uploadList.concat(data.data)
                    if(that.uploadIndex==that.uploadImgLenght){
                        that.loadingModel = false;
                        // 上传成功模态框
                        that.successModel = true;
                        setTimeout(function(){
                            that.successModel = false;
                        }, 500)
                    } else {
                        that.upload(imgs)  // 这里也可以使用for循环方式一个个上传，但是因为网络等原因，不能很好地控制，故改用这种重新调用的方式来完成
                    }
                },
            })
        },
        // 全屏预览图片
        ViewImage(path, imgList) {
            wx.previewImage({
                current: path, // 当前显示图片的http链接
                urls: imgList // 需要预览的图片http链接列表
            });
        },
        // 删除图片
        DelImg(index) {
            let that = this
            wx.showModal({
                title: '',
                content: 'Are you sure you want to delete it ?',
                cancelText: 'cancel',
                confirmText: 'Sure',
                success: function(res) {
                    if (res.confirm) {
                        that.uploadList.splice(index, 1);
                    }
                }
            })
        },
    }
}
</script>

多张图片上传也可以使用for循环方式一个个上传，但是因为网络等原因，不能很好地控制，所以使用 方法调用的方式，让图片一张上传成功后，如果还有图片就继续调用方法上传。