dd-OFFICE/src/views/applyfor/components/CFiles.vue

<template>
    <!-- NOTE: 附件和图片组件 -->
    <div class="custom-files-container">
        <div :class="[
            'custom-files__header',
            'flex', 'flex-row', 'flex-row-aic', 'flex-row-jcsp',
            filelist.length ? 'pb6' : '',
        ]">
            <span class="title">{{ headerTitle }}</span>
            <van-icon color="#a2a3a4" :size="20" name="add-o" @click="handleLaunchUploadBox" />
        </div>

        <!-- files show style -->
        <div class="source-listbox" v-if="isFs">
            <ul class="files-container">
                <li class="files-row flex flex-row flex-row-aic" v-for="(file, index) in filelist" :key="index">
                    <div class="icon">
                        <template v-if="['png', 'jpg', 'jpeg'].includes(file.type)">
                            <span>pic</span>
                        </template>
                        <span v-else-if="file.type === 'word'">word</span>
                        <span v-else-if="file.type === 'pdf'">pdf</span>
                        <span v-else-if="['xsl'].includes(file.type)">表格</span>
                    </div>
                    <div class="files-row__info">
                        <div class="files-name ellipsis">{{ file.name }}</div>
                        <div class="files-other-info flex flex-row flex-row-aic">
                            <div class="files-other-info__div flex flex-row">
                                <div class="size">{{ file.size }}</div>
                                <div class="review" @click="handleReviewFiles(file)">预览</div>
                            </div>
                            <van-icon :size="20" color="#A2A3A4" name="clear" @click="handleRemoveFile(file, index)" />
                        </div>
                    </div>
                </li>
            </ul>
        </div>

        <van-uploader v-show="filelist.length && !isFs" ref="uploadFileRef" v-model="filelist" preview-size="48px"
            :max-count="$attrs.maxCount" :max-size="maxSizeComp" :show-upload="false" :accept="acceptHandle"
            :preview-image="!isFs" :before-read="beforeRead" :after-read="afterRead" @oversize="onOversize">
        </van-uploader>
    </div>
</template>

<style lang="less" scoped>
@import url("@/styles/variables.less");

.custom-files {
    &-container {
        padding: 9px 12px;
        background: #fff;
    }

    &__header {
        &.pb6 {
            padding-bottom: 6px;
        }

        .title {
            font-size: @font-size-secondery;
            font-weight: 400;
            color: #191A1E;
            line-height: 20px;
        }
    }
}

.source-listbox {

    // 附件样式
    .files {
        &-row {
            margin-bottom: 5px;

            &:last-child {
                margin-bottom: initial;
            }

            .icon {
                width: 35px;
                height: 42px;
                background: #FFCF95;
                margin-right: 12px;
            }

            &__info {
                flex: 1;
                width: 0;
            }
        }

        &-name {
            width: 88%;
            font-size: @font-size-common;
            font-weight: 400;
            color: #191A1E;
            line-height: 18px;
        }

        &-other-info {
            justify-content: space-between;
            margin-top: 4px;

            .size {
                font-size: @font-size-third;
                font-weight: 400;
                color: #9A9A9A;
                line-height: 18px;
                margin-right: 10px;
            }

            .review {
                font-size: @font-size-third;
                font-weight: 400;
                color: #3290C4;
                line-height: 18px;
            }
        }
    }
}
</style>

<script>
import { ImagePreview } from 'vant';
import uploadFile from '@/utils/upload'
import {
    getStaticLinkInfo,
    getByteShowSize
} from '@/utils/util'

import {
    FileSize,
    PicSize
} from "@/utils/constant"

export default {
    name: 'CFiles',
    props: {
        value: {
            type: Array
        },
        ctype: {
            validator: val => ['files', 'images'].includes(val),
            default: 'files'
        }
    },
    computed: {
        isFs() { // 是否是文件类型上传
            return this.ctype === 'files'
        },
        acceptHandle() { // 图片上传文件限制
            return this.isFs ? "*" : "image/*"
        },
        headerTitle() {
            return this.isFs ? '附件' : '图片'
        },
        // 文件大小
        maxSizeComp() {
            let mb = 1 * 1024 * 1024;
            return this.isFs ? FileSize * mb : PicSize * mb
        }
    },

    data() {
        return {
            toastInstance: null,
            filelist: []
        }
    },

    mounted() {
        this.handleUpdateValues()
    },

    methods: {
        handleUpdateValues() {
            const arrs = this.value
            if (Array.isArray(arrs) && arrs.length) this.filelist = [...arrs]
        },
        // 启动上传组件
        handleLaunchUploadBox() {
            this.$refs.uploadFileRef.chooseFile()
        },

        // @returns Boolean {true/false}
        beforeRead() {
            this.toastInstance = this.$toast.loading({
                duration: 0,
                message: '上传中'
            })
            // NOTE: 上传前的控制
            return true
        },

        // 自行上传文件
        async afterRead(file, detail) {
            console.log('after read', file, detail)
            try {
                const { fullurl: url } = await uploadFile(file.file)
                const { suffix } = getStaticLinkInfo(url)
                file.name = file.file.name
                file.type = suffix
                file.url = url
                file.size = getByteShowSize(file.file.size)
                file.status = 'success'
                this.$forceUpdate() // 强制更新渲染视图
            } catch (error) {
                file.status = 'failed'
                file.message = error.message
            } finally {
                this.toastInstance.clear()
            }
        },

        // 超出文件大小
        onOversize() {
            let desc = this.isFs ? `文件超过${FileSize}MB` : `图片超过${PicSize}MB`
            this.$toast(desc)
        },

        // 预览文件
        handleReviewFiles(file) {
            // TODO: 如果是图片直接预览。 非图片其他方式预览（下载、或者插件）

            // NOTE: 可进行图片预览类型
            if (['png', 'jpg', 'jpeg'].includes(file.type)) {
                ImagePreview([file.url])
            } else {
                this.$toast(file.type + '预览开发中...')
            }
        },
        handleRemoveFile(file, index) {
            this.filelist.splice(index, 1)
        }
    },
    watch: {
        // NOTE: 判断是否有新添加。 新添加赋值
        filelist: {
            handler(arrs) {
                let hasAdd = arrs.some(image => (image.content))
                if (hasAdd) {
                    this.$listeners['input'] && this.$emit('input', arrs)
                }
            }
        },
        // value: {
        //     handler(arrs) {
        //         if (Array.isArray(arrs) && arrs.length) {
        //             this.filelist = [...arrs]
        //         }
        //     }
        // }
    }
}

</script>