uniapp图片上传组件，包括回显

<template>
    <view class="img-list">
        <view v-if="!multiple">
            <view v-if="fileStr_" class="img-item pr">
                <view @click="previewImage('radio', fileStr_)" class="img-box auto-img oh">
                    <image mode="widthFix" :src="fileStr_"></image>
                </view>
                <text @click="deleteImage('radio', index)" class="delete-icon iconfont iconshanchu"></text>
            </view>

            <view v-if="!fileStr_" @click="selectImage()" class="img-box fcjc tc">
                <view>
                    <view class="iconfont iconshangchuantupian f-999"></view>
                    <view class="f-24 f-999">上传图片</view>
                </view>
            </view>
        </view>

        <view v-if="multiple">
            <view class="img-child fc">
                <view v-for="(item, index) in fileList_" :key="index" class="pr m24">
                    <view @click="previewImage('check', item.url, index)" class="img-box auto-img oh">
                        <image mode="widthFix" :src="item.url"></image>
                    </view>
                    <text v-if="isDelete" @click="deleteImage('check', index)" class="delete-icon iconfont iconshanchu"></text>
                </view>

                <view v-if="isUpload">
                    <view v-if="fileList_.length < limit" @click="selectImage()" class="img-box fcjc tc m24">
                        <view>
                            <view class="iconfont iconshangchuantupian f-999"></view>
                            <view class="f-24 f-999">上传图片</view>
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="isLimit" class="limit-text">{{ fileList_.length }}/{{ limit }}</view>
        </view>

    </view>
</template>

<script>
    export default {
        props: {
            width: {
                type: Number,
                default: 150
            },
            height: {
                type: Number,
                default: 150
            }, // 组件宽高
            flag: {
                type: String,
                default: ''
            }, // 图片上传/删除标识
            itemColor: {
                type: String,
                default: '#333333',
            },

            name: {
                type: String,
                default: 'images'
            },
            multiple: {
                type: Boolean,
                default: true
            },
            limit: {
                type: Number,
                default: 5
            },
            isLimit: {
                type: Boolean,
                default: true
            },
            isDelete: {
                type: Boolean,
                default: true
            },
            isPreview: {
                type: Boolean,
                default: true
            },
            isUpload: {
                type: Boolean,
                default: true
            },

            flieList: {
                type: Array,
                default () {
                    return []
                }
            },
            fileStr: {
                type: String,
                default: ''
            },

        },
        data() {
            return {
                action: '', // 上传地址
                fileStr_: this.fileStr, // 单图
                fileList_: this.flieList, // 多图

            }
        },
        watch: {

        },
        created() {

        },
        methods: {
            // 接口


            // 功能
            // 点击选图
            selectImage() {
                var that = this;
                wx.showActionSheet({
                    itemList: ['从相册中选择', '拍照'],
                    itemColor: that.itemColor,
                    success: function(res) {
                        if (!res.cancel) {
                            if (res.tapIndex == 0) {
                                that.chooseWxImageShop('album'); // 从相册中选择
                            } else if (res.tapIndex == 1) {
                                that.chooseWxImageShop('camera'); // 手机拍照
                            }
                        }
                    }
                })
            },
            // 选择图片
            chooseWxImageShop: function(type) {
                var that = this, len = ''
                if (that.multiple) {
                    len = that.fileList_.length === 0 ? that.limit : (that.limit - that.fileList_.length)
                } else {
                    len = 1
                }
                wx.chooseImage({
                    sizeType: ['original', 'compressed'],
                    count: len,
                    sourceType: [type],
                    success: function(res) {
                        var tempFilePaths = res.tempFilePaths
                        for (var i in tempFilePaths) {
                            if (i < len) {
                                that.uploadImage(that.service.imagesFileUpload, tempFilePaths[i])
                            }
                        }
                    },
                    fail: function(res) {

                    }
                })
            },
            // 上传图片
            uploadImage: function(url, filePath) {
                var that = this;
                wx.uploadFile({
                    url: url,
                    filePath: filePath,
                    name: that.name,
                    // header: {
                    //     "Content-Type": "multipart/form-data"
                    // },
                    formData: {
                    },
                    success: function(res) {
                        var data = JSON.parse(res.data);
                        if (data.code == 200) {
                            var data = JSON.parse(res.data)
                            if (that.multiple) {
                                var arr = [{ name: new Date().getTime(), url: data.data.img_path }]
                                that.fileList_ = that.fileList_.concat(arr)
                            } else {
                                that.fileStr_ = data.data.img_path
                            }
                            that.$emit('toParent', that.multiple, that.fileStr_, that.fileList_, that.flag)
                        }
                    }
                })
            },

            // 删除图片
            deleteImage(str, index) {
                if (str === 'radio') {
                    this.fileStr_ = ''
                } else if (str === 'check') {
                    this.fileList_.splice(index, 1)
                }
                this.$emit('toParent', this.multiple, this.fileStr_, this.fileList_, this.flag)
            },

            // 预览图片
            previewImage(str, url) {
                if (!this.isPreview) {
                    return
                }
                if (str === 'radio') {
                    uni.previewImage({
                        urls: [url],
                        current: url
                    })
                } else if (str === 'check') {
                    var imgArr = this.fileList_,
                        arr = []
                    imgArr.forEach((item, index) => {
                        arr.push(item.url)
                    })
                    uni.previewImage({
                        urls: arr,
                        current: url
                    })
                }
            },


        }
    }
</script>

<style scoped lang="scss">
    .img-list {
        flex-wrap: wrap;

        .img-item {
            flex: 0 0 150rpx;
            width: 150rpx;
            height: 150rpx;
        }

        .img-child {
            flex-wrap: wrap;
        }

        .img-box {
            flex: 0 0 150rpx;
            width: 150rpx;
            height: 150rpx;
            border-radius: 10rpx;
            border: 1rpx solid #979797;
            box-sizing: border-box;
        }

        .delete-icon {
            position: absolute;
            top: -10rpx;
            right: -10rpx;
            color: #999;
        }

        .limit-text {
            text-align: right;
            color: #999;
            padding-bottom: 24rpx;
        }

        .m24 {
            margin: 0 24rpx 24rpx 0;
        }

    }
</style>