h5-dm-orderFront/src/components/upload/index.vue

<template>
    <div class="upload">
        <el-upload
            ref="uploadRefs"
            :action="action"
            :multiple="multiple"
            :limit="limit"
            :show-file-list="false"
            :headers="headers"
            :data="uploadData"
            :on-progress="handleProgress"
            :on-success="handleSuccess"
            :on-exceed="handleExceed"
            :on-error="handleError"
            :before-upload="beforeUpload"
            :accept="getAccept"
        >
            <slot></slot>
        </el-upload>
        <el-dialog
            v-if="showProgress && fileList.length"
            v-model="visible"
            title="上传进度"
            :close-on-click-modal="false"
            width="500px"
            :modal="false"
            @close="handleClose"
        >
            <div class="file-list p-4">
                <template v-for="(item, index) in fileList" :key="index">
                    <div class="mb-5">
                        <div>{{ item.name }}</div>
                        <div class="flex-1">
                            <el-progress :percentage="parseInt(item.percentage)"></el-progress>
                        </div>
                    </div>
                </template>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, shallowRef } from 'vue'
import useUserStore from '@/stores/modules/user'
import config from '@/config'
import feedback from '@/utils/feedback'
import type { ElUpload, UploadProps, UploadRawFile } from 'element-plus'
import { RequestCodeEnum } from '@/enums/requestEnums'
import ImageCompressor from 'image-compressor.js'
import {getToken, getUserId, getBrandId, getHouseId, getShopId} from '@/utils/auth'
export default defineComponent({
    components: {},
    props: {
        // 上传文件类型
        type: {
            type: String,
            default: 'image'
        },
        // 是否支持多选
        multiple: {
            type: Boolean,
            default: true
        },
        // 多选时最多选择几条
        limit: {
            type: Number,
            default: 10
        },
        // 上传时的额外参数
        data: {
            type: Object,
            default: () => ({})
        },
        // 是否显示上传进度
        showProgress: {
            type: Boolean,
            default: false
        }
    },
    emits: ['change', 'error'],
    setup(props, { emit }) {
        const userStore = useUserStore()
        const uploadRefs = shallowRef<InstanceType<typeof ElUpload>>()
        const action = ref(`${config.baseUrl}${config.urlPrefix}/upload/${props.type}`)
        const userId = getUserId();
        const brandId = getBrandId();
        const houseId = getHouseId();
        const token = getToken();
        const shopId = getShopId();
        const headers = computed(() => ({
            ['like-admin']: userStore.token,
            version: config.version,
            token: token,
            userId: userId,
            brandId: brandId,
            houseId: houseId,
        }))
        const visible = ref(false)
        const fileList = ref<any[]>([])

        // 定义响应式的上传参数
        const uploadData = ref(props.data)

        const beforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
            // 更新上传参数
            uploadData.value = {
                ...props.data,
                fileName: rawFile.name,
              shopId: shopId
            }
            if(props.type === 'image'){
              let q = 0.5
              if (rawFile.size > 1000000 && rawFile.size < 5000000) {
                q = 0.5
              } else if (rawFile.size >= 5000000 && rawFile.size < 10000000) {
                q = 0.25
              } else if (rawFile.size >= 10000000) {
                q = 0.1
              } else {
                return true
              }
              return new Promise((resolve) => {
                new ImageCompressor(rawFile, {
                  quality: q, //压缩质量
                  checkOrientation: false, //图片翻转，默认为false
                  success(result: any) {
                    console.log(result)
                    resolve(result)
                  }
                })
              })
            }
        }

        const handleProgress = (event: any, file: any, fileLists: any[]) => {
            visible.value = true
            fileList.value = toRaw(fileLists)
        }

        const handleSuccess = (response: any, file: any, fileLists: any[]) => {
            const allSuccess = fileLists.every((item) => item.status == 'success')
            if (allSuccess) {
                uploadRefs.value?.clearFiles()
                visible.value = false
                emit('change')
            }
            if (response.code == RequestCodeEnum.FAILED && response.msg) {
                feedback.msgError(response.msg)
            }
        }
        const handleError = (event: any, file: any) => {
            feedback.msgError(`${file.name}文件上传失败`)
            uploadRefs.value?.abort(file)
            visible.value = false
            emit('change')
            emit('error')
        }
        const handleExceed = () => {
            feedback.msgError(`超出上传上限${props.limit}，请重新上传`)
        }
        const handleClose = () => {
            uploadRefs.value?.clearFiles()
            visible.value = false
        }

        const getAccept = computed(() => {
            switch (props.type) {
                case 'image':
                    return '.jpg,.png,.gif,.jpeg,.ico,.bmp'
                case 'video':
                    return '.wmv,.avi,.mov,.mp4,.flv,.rmvb'
                default:
                    return '*'
            }
        })
        return {
            uploadRefs,
            action,
            headers,
            visible,
            fileList,
            getAccept,
            handleProgress,
            handleSuccess,
            handleError,
            handleExceed,
            handleClose,
            beforeUpload,
            uploadData
        }
    }
})
</script>

<style lang="scss"></style>