for_client/src/views/tentative/detect/components/HcDragUpload.vue

<template>
    <el-upload class="hc-upload-border" drag :action="action" :headers="getTokenHeader()" :data="uploadData" :accept="accept" :file-list="fileListData"  :disabled="uploadDisabled"
               :on-preview="uploadPreview"  :on-success="uploadSuccess" :on-exceed="uploadExceed" :on-error="uploadError" :before-upload="beforeUpload" :on-change="onChangeToolFile"
               :on-progress="uploadprogress"   ref="upload">
        <div class="hc-upload-loading" v-loading="uploadDisabled" :element-loading-text="loadingText">
            <HcIcon name="backup" ui="text-5xl mt-4"/>
            <div class="el-upload__text">拖动文件到这里 或 <em>点击这里选择文件</em> 并上传</div>
        </div>
        <template #tip>
            <div class="el-upload__tip" style="font-size: 14px;">允许格式：jpg/png/pdf/word， 文件大小 小于 60MB</div>
        </template>
    </el-upload>
</template>

<script setup>
import {ref,watch,onMounted} from "vue";
import {getTokenHeader} from '~src/api/request/header';
import wbsApi from "~api/data-fill/wbs"
import {isSize} from "vue-utils-plus"
import { genFileId } from 'element-plus'
const props = defineProps({
    fileList: {
        type: Array,
        default: () => ([])
    },
    datas: {
        type: Object,
        default: () => ({})
    },
    uploadData:{
      type: Array,
        default: () => ([])
  }
})

//变量
const uploadData = ref(props.datas)
const fileListData = ref(props.fileList);

const action = '/api/blade-resource/oss/endpoint/put-file-attach';
const accept = 'image/png,image/jpg,image/jpeg,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/pdf,.doc,.docx,application/msword';
const uploadDisabled = ref(false)

//监听
watch(() => [
    props.fileList,
    props.datas,
    
], ([fileList, datas]) => {
    uploadData.value = datas
    fileListData.value = fileList
  
})

//渲染完成
onMounted(()=> {
    beforeFileNum.value = 0
    finishFileNum.value = 0
    errorFileNum.value = 0
})

//事件
const emit = defineEmits(['change','progress','finished'])

//上传前
const beforeFileNum = ref(0)
const beforeUpload = async (file) => {
    if (isSize(file?.size,60)) {
        beforeFileNum.value ++;
        return true;
    } else {
        window?.$message?.warning('文件大小, 不能过60M!');
        return false;
    }
}
const upload=ref('')
//超出限制时
const uploadExceed = (files) => {
}
//文件改变

const onChangeToolFile = (files,fileList) => {
     fileListData.value = [files] 
     fileList.splice(0, 1)
        
}
//上传中
const loadingText = ref('上传中...')
const uploadprogress = () => {
    loadingText.value = '上传中...'
    uploadDisabled.value = true
}

//上传完成
const finishFileNum = ref(0)
// const uploadSuccess = () => {
//     finishFileNum.value ++;
//     if (beforeFileNum.value === finishFileNum.value) {
//         uploadDisabled.value = false
//         emit('change', {type: 'success'})
//     }
// }
//上传完成
const uploadSuccess = ({code, data}) => {
    uploadDisabled.value = false
    emit('progress', false)
    if (code === 200) {
        window?.$message?.success('上传成功');
        emit('finished', data)
    } else {
        window?.$message?.error('上传失败');
    }
}


//上传失败
const errorFileNum = ref(0)
const uploadError = () => {
    errorFileNum.value ++;
    window?.$message?.error('上传失败');
    const num = finishFileNum.value + errorFileNum.value;
    if (beforeFileNum.value === num) {
        uploadDisabled.value = false
        emit('change', {type: 'success'})
    }
}

//预览
const uploadPreview = ({url}) => {
    if (url) {
        window.open(url, '_blank')
    }
}

//删除文件
const delUploadData = async ({id}) => {
    loadingText.value = '删除中...'
    uploadDisabled.value = true
    const {error, code} = await wbsApi.removeBussFile({
        ids: id
    })
    uploadDisabled.value = false
    if (!error && code === 200) {
        window?.$message?.success('删除成功')
        return true
    } else {
        return false
    }
}

const uploadRemove = () => {
    if(fileListData.value.length <= 0) {
        emit('change', {type: 'del'})
    }
}
</script>