yuebeilian-admin/src/components/goods/imgUpLoader1.vue

<template>
    <div class="img-container" v-loading="loading">
        <div class="wrapper" style="position: relative" v-if="url">
            <img :src="url" class="img" />
            <svg class="closeIcon" aria-hidden="true" @click="deletePic()">
                <use xlink:href="#icon-photo-close"></use>
            </svg>
        </div>
        <div class="btn-add" v-else>
            <input
                type="file"
                class="add"
                @change="addImg"
                ref="inputImg"
                accept="image/gif, image/jpeg, image/png, image/jpg"
            />
            <span v-if="text">{{ text }}</span>
            <svg class="icon" v-else aria-hidden="true">
                <use xlink:href="#icon-add"></use>
            </svg>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    name: 'img-uploader',

    data() {
        return {
            value: [], // 累计上传的轮播图
            loading: false, // 页面加载
            picList: [], // 上传oss图片列表
            url: this.imgUrl || ''
        };
    },
    props: {
        imgUrl: {
            type: String
        },
        text: {
            type: String
        },
        index: {
            type: Number
        }
    },
    created() {},
    mounted() {},
    computed: {},
    methods: {
        addImg: function (e) {
            // 鉴别上传重复图片
            let value = this.$refs.inputImg.value;
            // if (this.value.includes(value)) {
            //     this.$message({
            //         message: '图片上传重复，请重新选择！',
            //         type: 'warning'
            //     });
            //     return;
            // }
            let file = e.target.files[0];
            let max = this.maxPicNum;
            if (!file) {
                return;
            }
            // 商品相关上传图片
            this.loading = true;
            this.httpUploadImg({ prefix: 'goods', file: file }).then(
                (res) => {
                    // this.imgList.push(res);
                    this.$emit('getPics', this.index, res);
                    this.loading = false;
                    // 将当前的value赋给this.value,将value置空，避免input重复上传图片不触发change事件
                    this.value.push(value);
                    this.$refs.inputImg.value = '';
                },
                (res) => {}
            );
        },
        deletePic(index) {
            this.$emit('getPics', this.index, '');
        }
    },
    watch: {
        imgUrl(val) {
            this.url = val;
        }
    }
};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

.title {
    flex-center();
    justify-content: flex-start;
    word-main();
    height: cell-height;
    padding-left: 10px;
}

.img-container {
    flex-x();
    background: white;
    justify-content: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
    // width: 92%;
    margin-right 10px;

    .wrapper {
        width: 80px;
        height: 80px;
        margin: 10px 20px 10px 0;
        text-align center
        flex-x(center, center);

        .img {
            width: 80px;
            height auto;
            border-radius: 5px;
        }
    }

    .btn-add {
        flex-y();
        width: 80px;
        height: 80px;
        border: 1px solid border-color;
        font-size: 10px;
        color: gray9;
        position: relative;
        background: #E8E8E8;

        .add {
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
        }
    }
}

.icon {
    fill: border-color;
    width: 20px;
    height: 20px;
}

.closeIcon {
    fill: gray6;
    background-color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    top: -10px;
    right: -10px;
    cursor: pointer;
}
</style>