search_tools_web/src/components/UploadImg/index.vue

<template>
    <div>
        <el-upload
            :limit="limit"
            :multiple="multiple"
            :action="uploadFileUrl"
            list-type="picture-card"
            :file-list="fileListInner"
            :headers="headers"
            :on-error="handleError"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
            :on-success="handleSuccess"
            :before-upload="handleBeforeUpload"
            :show-file-list="true"
            :on-exceed="handleExceed"
            name="files"
            :class="isDetail || isUploaded ? 'upload-img' : ''"
        >
            <i class="el-icon-plus" />
            <div class="upload-img-box">
                <slot name="upload-img-box"></slot>
            </div>
        </el-upload>

        <el-dialog
            width="30%"
            append-to-body
            :before-close="
                () => {
                    dialogInnerVisible = false
                }
            "
            :visible.sync="dialogInnerVisible"
        >
            <img :src="previewUrl" style="display: block; max-width: 100%; margin: 0 auto" />
        </el-dialog>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { deleteImgAPI } from '@/api/common'
export default {
    props: {
        // 文件列表
        fileList: {
            type: Array,
            default: () => [],
        },
        // 上传地址
        uploadFileUrl: {
            type: String,
            default: '',
        },
        // 文件类型
        fileType: {
            type: Array,
            default: ['png', 'jpg', 'jpeg'],
        },
        // 文件大小
        fileSize: {
            type: Number,
            default: 10,
        },
        // 限制数量
        limit: {
            type: Number,
            default: 1,
        },
        // 是否多选
        multiple: {
            type: Boolean,
            default: false,
        },
        // 是否为查看详情
        isDetail: {
            type: Boolean,
            default: false,
        },
        // 是否上传的数量已经满足
        isUploaded: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // addOrEditForm: {
            //     fileList: [],
            // },
            headers: {
                Authorization: 'Bearer ' + getToken(),
            },
            dialogInnerVisible: false,
            previewUrl: '',
            deleteFileList: [],
        }
    },
    methods: {
        // 删除
        async handleRemove(file, fileList) {
            // const deleteFile = {
            //     filePath: '',
            // }
            if (file.response && file.response.data.length > 0) {
                this.$emit('deleteFile', { filepath: file.response.data[0].filePath, isNew: true })
            } else {
                this.$emit('deleteFile', { filepath: file.filePath, isNew: false })
            }
            this.$emit('update:fileList', fileList)
            // const res = await deleteImgAPI(deleteFile)
            // if (res.code === 200) {
            //     this.$emit('update:fileList', fileList)
            // } else {
            //     this.$modal.msgError('删除失败')
            // }
        },

        // 预览
        handlePreview(file) {
            this.dialogInnerVisible = true
            this.previewUrl = file.url
        },

        // 上传成功
        handleSuccess(response, file, fileList) {
            this.$emit('update:fileList', [])
            if (response.code === 200) {
                this.$emit('update:fileList', fileList)
            } else {
                this.$modal.msgError('上传失败')
            }
            this.$modal.closeLoading()
        },

        // 上传失败
        handleError() {
            this.$modal.msgError('上传失败')
            this.$modal.closeLoading()
        },

        // 上传前
        handleBeforeUpload(file) {
            const isFormat = this.fileType.some((e) => file.type.includes(e))
            if (!isFormat) {
                this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join('、')}格式的文件!`)
                return false
            }
            // const isLt = file.size / 1024 / 1024 < this.fileSize
            // if (!isLt) {
            //     this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)

            //     return false
            // }
            this.$modal.loading('图片正在上传，请稍候...')
        },

        // 超出限制
        handleExceed(files, fileList) {
            this.$modal.msgError(`上传的图片数量不能超过 ${this.limit} 个`)
        },
    },

    computed: {
        fileListInner: {
            get() {
                return this.fileList
            },
            set(newValue) {
                this.$emit('update:fileList', newValue)
            },
        },
    },
}
</script>

<style scoped lang="scss">
::v-deep .el-upload--picture-card {
    position: relative;
    margin-right: 10px;

    .upload-img-box {
        position: absolute;
        bottom: -15%;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
::v-deep .upload-img .el-upload--picture-card {
    display: none;
}
</style>