uniapp uni.uploadFile上传图片

上传多张图片

<uni-file-picker v-model="successImages" :imageStyles="{width: '33%',height:(pickerHeight  || 107 )+'px',border:false}"
                    :delIcon="true" :auto-upload="false" @select="uploadFile" @delete="deleteFile" class="picker">
    <view class="box flex-center">
        <image src='加号图片')" mode="widthFix"></image>
    </view>
</uni-file-picker>

export default {
    data() {
        return {
            images: [],
            successImages: [],
            pickerHeight: 0
        }
    },
    mounted() {
        this.initPickerHeight();
    },
    updated() {
        this.initPickerHeight();
    },
    methods: {
        initPickerHeight() {
            if (0 !== this.pickerHeight) {
                return
            }
            uni.createSelectorQuery()
                .in(this)
                .select('.evaluate-imgs')
                .boundingClientRect(data => {
                    if (data) {
                        this.pickerHeight = (data.width + 10) * 0.33;
                    }
                })
                .exec();
        },
        uploadFile(rsp) {
            rsp.tempFilePaths.forEach(async (item, index) => {
                this.images.push({
                    tempFilePath: item,
                    uploading: true // 上传中
                })
                let res = await new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: '路径',
                        filePath: item,
                        name: 'file',
                        success: res => {
                            let data = JSON.parse(res.data);
                            if (200 === data.code) {
                                uni.$showMsg('上传成功')
                                this.images = this.images.map(img => {
                                    if (item === img.tempFilePath) {
                                        img.url = data.data.path
                                        img.uploading = false
                                    }
                                    return img
                                })
                            } else {
                                this.images = this.images.filter(img => item !== img.tempFilePath)
                                uni.$showMsg('上传失败：' + data.msg)
                            }
                            resolve(index)
                        },
                        fail: () => {
                            this.images = this.images.filter(img => item !== img.tempFilePath)
                            uni.$showMsg('上传失败：' + res.errMsg)
                            reject()
                        }
                    });
                })
            });
             this.imagesFormat()
        },
        deleteFile(rsp) {
                this.images = this.images.filter(item => item.url !== rsp.tempFilePath)
                this.imagesFormat()
        },
        imagesFormat() {
            this.successImages = this.images.map(img => {
                return {
                    "name": "图片",
                    "extname": "png",
                    "url": img.url
                }
            })
        }
    }
}    

::v-deep .uni-progress-bar,
::v-deep .uni-progress-inner-bar,
::v-deep .file-picker__progress {
    height: 0 !important;
}

::v-deep .icon-del-box {
    top: 0 !important;
    right: 0 !important;
    width: 25rpx !important;
    height: 25rpx !important;
}

::v-deep .icon-del {
    width: 15rpx !important;
    height: 2rpx !important;
}

::v-deep .icon-del-box {
    background-color: #999999 !important;
}

.box {
    width: 100%;
    height: 100%;
    font-size: 50rpx;
    color: #666;
    background-color: #333333;
    line-height: 1;

    image {
        width: 47rpx;
    }
}

效果图如下：