sh_real_name_system_web/src/components/UploadImgFormData/index.vue

<template>
    <div>
        <el-upload
            action="#"
            name="files"
            :limit="limit"
            :headers="headers"
            :auto-upload="false"
            :multiple="multiple"
            :show-file-list="true"
            list-type="picture-card"
            :on-error="handleError"
            :on-exceed="handleExceed"
            :file-list="fileListInner"
            :on-remove="handleRemove"
            :on-preview="handlePreview"
            :on-change="handleChange"
            :before-upload="handleBeforeUpload"
            :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'
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) {
            this.$emit('onUploadChange', fileList)
            // if (file.response && file.response.data.length > 0) {
            //     this.$emit('deleteFile', {
            //         filePath: file.response.data[0].filePath,
            //         isNew: true,
            //     })
            // } else {
            //     if (file.isNew) {
            //         this.$emit('deleteFile', {
            //             filePath: file.filePath,
            //             isNew: true,
            //         })
            //     } else {
            //         this.$emit('deleteFile', {
            //             filePath: file.filePath,
            //             isNew: false,
            //         })
            //     }
            // }
            this.$emit('update:fileList', fileList)
        },

        // 预览
        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)
                this.$emit('uploadSuccess')
            } else {
                this.$modal.msgError('上传失败')
            }
            this.$modal.closeLoading()
        },

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

        // 上传前
        handleBeforeUpload(file) {
            // 根据file的name的后缀判断是否符合要求
            console.log(file, 'file')
            const isFormat = this.fileType.some((e) => file.name.endsWith(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
            }

            console.log(file.name, 'file.name')

            this.$modal.loading('图片正在上传，请稍候...')
            // 替换文件路径中的#号
            const newFileName = file.name.replace(/#/g, '@')
            const newFile = new File([file], newFileName, { type: file.type })

            // 修改原始文件的name属性
            Object.defineProperty(file, 'name', {
                value: newFileName,
            })

            return true
        },

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

        // 文件发生变化
        handleChange(file, fileList) {
            console.log(file, fileList, 'file, fileList')

            const isFormat = this.fileType.some((e) => file.name.endsWith(e))
            if (!isFormat) {
                this.$modal.msgError(
                    `文件格式不正确, 请上传${this.fileType.join(
                        '、',
                    )}格式的文件!`,
                )

                this.$emit(
                    'update:fileList',
                    fileList.filter((item) => item.uid !== file.uid),
                )
                return false
            }
            // 判断文件大小
            const isLt = file.size / 1024 / 1024 < this.fileSize
            if (!isLt) {
                this.$modal.msgError(`图片大小不能超过 ${this.fileSize} MB`)
                this.$emit(
                    'update:fileList',
                    fileList.filter((item) => item.uid !== file.uid),
                )
                return false
            }

            // 判断文件名称是否过长
            if (file.name.length > 30) {
                this.$modal.msgError('文件名称不能超过30个字符')
                this.$emit(
                    'update:fileList',
                    fileList.filter((item) => item.uid !== file.uid),
                )
                return false
            }
            this.$emit('update:fileList', fileList)
            this.$emit('onUploadChange', fileList)
        },
    },

    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>