SmartCommunity/operationSupport/src/components/common/uploadList.vue

<template>
    <div class="clickUpload">
        <div
            class="clickUpText ulrTrue"
            :class="!typeVideo(item) && !typeIcon(item) ? 'fileName' : ''"
            v-for="(item, index) in uploadArr"
            :key="item"
        >
            <i class="el-icon-delete deletes" @click="delet(item, index)"></i>
            <video v-if="typeVideo(item)" :src="item"></video>
            <img v-else-if="typeIcon(item)" class="dataImg" :src="item" />
            <div v-else>{{ item }}</div>
        </div>
        <div class="clickUpText" v-if="uploadArr.length < limit">
            <div class="addImg" @click="clickFile"><i class="el-icon-plus ashText"></i></div>
        </div>
        <el-upload
            style="display: none"
            :headers="token"
            ref="upload"
            :limit="limit"
            :action="uploadUrl"
            :on-success="uploadsuccess"
            :before-upload="beforeAvatarUpload"
            :auto-upload="true"
            :name="name"
        >
        </el-upload>
    </div>
</template>
<script>
export default {
    name: 'bzUpload',
    data() {
        return {
            token: {
                [localStorage.getItem('SC_token') && 'Authorization']: 'Bearer ' + localStorage.getItem('SC_token')
            }
        };
    },
    props: {
        uploadUrl: {
            type: String,
            default: '/sc-community/upload/uploadFile'
        },
        type: {
            type: String,
            default: 'img,video'
        },
        className: {
            type: Boolean,
            default: false
        },
        name: {
            type: String,
            default: 'file'
        },
        uploadArr: {
            type: Array,
            default: () => []
        },
        limit: {
            type: Number,
            default: 3
        }
    },
    methods: {
        uploadsuccess(response, file, fileList) {
            this.$refs.upload.clearFiles();
            if (0 === response.status) {
                this.uploadArr.push(response.data);
            }
        },
        beforeAvatarUpload(file) {
            let isType = true;
            if (this.type == 'video') {
                isType = ['video/mp4'].includes(file.type);
                if (!isType) {
                    this.$message.error('请上传mp4视频!');
                }
            } else if (this.type == 'img') {
                isType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
                if (!isType) {
                    this.$message.error('请上传图片!');
                }
            }
            return isType;
        },
        typeVideo(str) {
            let type = str.slice(str.lastIndexOf('.') + 1, str.length);
            let videoType = ['mp4'];
            return videoType.includes(type);
        },
        typeIcon(str) {
            let type = str.slice(str.lastIndexOf('.') + 1, str.length);
            let imgType = ['png', 'jpeg', 'jpg'];
            return imgType.includes(type);
        },
        clickFile() {
            this.$refs['upload'].$children[0].$refs.input.click();
        },
        delet(item, index) {
            this.uploadArr.splice(index, 1);
        }
    }
};
</script>
<style lang="scss" scoped>
.clickUpload {
    display: flex;
    .clickUpText {
        height: 60px;
        width: 80px;
        border: 1px solid #e0e1e3;
        box-sizing: border-box;
        background: white;
        border-radius: 5px;
        margin-right: 5px;
        z-index: 1;
        position: relative;
        img.dataImg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 5px;
        }
        .addImg {
            line-height: 65px;
            text-align: center;
            cursor: pointer;
            & > i {
                font-size: 30px;
            }
        }
        video {
            width: 100%;
            height: 100%;
        }
    }

    .deletes {
        display: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
    }
    .ulrTrue {
        &:hover {
            .deletes {
                display: block;
            }
        }
    }
    .fileName {
        height: initial !important;
        width: initial !important;
        border: none;
    }
}
</style>