<template>
|
<div class="upload">
|
<!-- 上传组件封装 -->
|
<el-upload
|
ref="uploadRef"
|
:file-list="fileList"
|
:accept="acceptType"
|
action="#"
|
:multiple="true"
|
:show-file-list="false"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:limit="100"
|
:on-exceed="handleExceed"
|
:http-request="uplodFile"
|
:on-change="handleChange"
|
:on-progress="uploadVideoProcess"
|
:on-error="handleUploadError"
|
>
|
<slot>
|
<el-button class="btnDiv" type="primary" :loading="fileLoading">
|
<el-icon class="iconClass">
|
<Upload/>
|
</el-icon>
|
选择视频
|
</el-button>
|
</slot>
|
<!-- <template #tip>-->
|
<!-- <div class="el-upload__tip">{{ tips }}</div>-->
|
<!-- </template>-->
|
</el-upload>
|
<el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import type {UploadProps} from 'element-plus'
|
import {genFileId, UploadRawFile} from 'element-plus'
|
import {Upload} from '@element-plus/icons-vue'
|
import createAxios from '@/utils/axios'
|
interface Props {
|
tips?: string
|
multiple?: boolean
|
limitNumber?: number
|
fileList: any
|
acceptType?: string
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
tips: '最多上传1个视频,且视频大小不能超过100MB',
|
multiple: false,
|
acceptType: '.mp4',
|
fileList: [],
|
limitNumber: 1
|
})
|
|
const emit = defineEmits(['update:fileList2', 'beginUpload2', 'removeFile2','progress','error'])
|
const uploadRef = ref()
|
const handleChange = (file: any, fileList: any[]) => {
|
if (fileList.length > 1) {
|
fileList.splice(0, 1)
|
}
|
}
|
|
// 点击预览上传的文件
|
const handlePreview: UploadProps['onPreview'] = uploadFile => {
|
// console.log('预览已经上传的文件', uploadFile.uid)
|
}
|
|
// 移除已经上传的文件
|
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
|
emit('removeFile2')
|
}
|
|
// 问价移除前的操作
|
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
|
return ElMessageBox.confirm(` 是否删除${uploadFile.name} ?`).then(
|
() => true,
|
() => false
|
)
|
}
|
|
// 上传进度条
|
const loadProgress = ref(0) // 动态显示进度条
|
const progressFlag = ref(false) // 关闭进度条
|
const uploadVideoProcess = (event, file, fileList) => {
|
// progressFlag.value = true; // 显示进度条
|
// // loadProgress.value = parseInt(event.percent); // 动态获取文件上传进度
|
// loadProgress.value = file.percentage; // 动态获取文件上传进度
|
//
|
// console.log("------------",event)
|
//
|
// if (loadProgress.value >= 100) {
|
// loadProgress.value = 100
|
// // setTimeout(() => {
|
// progressFlag.value = false
|
// // }, 1000) // 一秒后关闭进度条
|
// }
|
emit('progress')
|
}
|
const handleUploadError=()=>{
|
console.log("文件上传失败钩子handleUploadError")
|
emit('error')
|
}
|
// 文件超出限制提示
|
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
|
uploadRef.value?.clearFiles()
|
const file = files[0] as UploadRawFile
|
file.uid = genFileId()
|
uploadRef.value?.handleStart(file)
|
uploadRef.value!.submit()
|
}
|
const fileLoading = ref<boolean>(false)
|
// 自定义上传文件
|
const uplodFile = (option: any) => {
|
if (option.file.size >= 943718400) {
|
return new Promise((resolve, reject) => {
|
ElMessage.warning('文件体积过大不可超过900M，请重新上传！')
|
reject('文件体积过大')
|
})
|
return
|
}
|
|
const fileType = option.file.name.split('.')[option.file.name.split('.').length - 1]
|
if (props.acceptType.search(fileType) === -1) {
|
return new Promise((resolve, reject) => {
|
ElMessage.warning('类型错误，请重新上传！')
|
reject('文件类型错误')
|
})
|
}
|
if (option.file.name.length > 100) {
|
return new Promise((resolve, reject) => {
|
ElMessage.warning('文件名称不超过100字符！')
|
reject('文件名称过长')
|
})
|
}
|
let param = new FormData()
|
param.append('file', option.file)
|
const fileInfo = {
|
file: option.file,
|
uploadFileInfo: null
|
}
|
fileLoading.value = true
|
emit('beginUpload2')
|
return new Promise((resolve, reject) => {
|
// 调用上传文件方法
|
createAxios({
|
url: '/admin/common/fileUpload',
|
headers: {
|
'Content-Type': 'multipart/form-data'
|
},
|
data: param,
|
onUploadProgress: progressEvent => {
|
const complete = parseInt(((progressEvent.loaded / progressEvent.total) * 100) | 0, 10)
|
// 重点二：onProgress()方法需要以上方接收的形参来调用
|
// 这个方法有一个参数"percent"，给他进度值 complete 即可
|
option.onProgress({percent: complete})
|
}
|
})
|
.then(res => {
|
if (res.code == 200) {
|
fileInfo.uploadFileInfo = res
|
ElMessage.success('文件上传成功!')
|
emit('update:fileList2', option.file, res.data.fileId)
|
resolve(res.msg)
|
} else {
|
// ElMessage.warning(res.msg)
|
}
|
})
|
.finally(() => {
|
fileLoading.value = false
|
emit('error')
|
})
|
})
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.el-upload__tip {
|
color: #d9001b;
|
}
|
|
.btnDiv {
|
width: 100px;
|
|
.iconClass {
|
font-size: 18px;
|
margin-right: 3px;
|
|
}
|
}
|
</style>
|
