uniapp 自定义uni-file-picker多图上传

<uni-file-picker limit="4" 
                 :imageStyles="{width: '25%',height:(pickerHeight  || 86 )+'px'}" 
                 :delIcon="true"
                 :auto-upload="false"  // 停止自动上传
                 @select="uploadFile" 
                 @delete="deleteFile" 
                 class="picker">
    <view class="add flex-center">
        +
    </view>
</uni-file-picker>

data() {
    return {
        pickerHeight: 0
    }
},
options: {
    styleIsolation: 'shared'
},
mounted() {
    this.initPickerHeight();
},
updated() {
    this.initPickerHeight();
},
methods: {
    initPickerHeight() {
        if (0 !== this.pickerHeight) {
            return
        }
        uni.createSelectorQuery()
            .in(this)
            .select('.receive-content')
            .boundingClientRect(data => {
                if (data) {
                    this.pickerHeight = (data.width - 10) * 0.25;
                }
            })
            .exec();
    },
    uploadFile(rsp) {
        rsp.tempFilePaths.forEach(async (item, index) => {
            this.images.push({
                tempFilePath: item,
            })
            let res = await new Promise((resolve, reject) => {
                uni.uploadFile({
                    url: this.$config.baseUrl + '/api/upload/headimg',
                    filePath: item,
                    name: 'file',
                    dataType: 'json',
                    responseType: 'json',
                    success: res => {
                        let data = JSON.parse(res.data);
                        this.images = this.images.map(img => {
                            if (item === img.tempFilePath) {
                                img.url = data.data.pic_path
                            }
                            return img
                        })
                        resolve(index)
                    },
                    fail: () => {
                        uni.$showMsg('图片上传失败')
                        reject()
                    }
                });
            })
        });
    },
    deleteFile(rsp) {
        this.images=this.images.filter(item=>item.tempFilePath!==rsp.tempFilePath)
    }
}

::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;
}

效果图如下：

上传封装：

upload_file(tempFilePath, data, path,callback) {
    return new Promise((resolve, reject) => {
        uni.uploadFile({
            url: ‘xxx’,
            filePath: tempFilePath,
            name: 'file',
            formData: data,
            success: function(res) {
                var path_str = JSON.parse(res.data);
                if (path_str.code >= 0) {
                    resolve(path_str.data.pic_path);
                    typeof callback == 'function' && callback(path_str.data.pic_path);
                } else {
                    reject("error");
                }
            }
        });
    });
}