<template>
|
<div class="upload">
|
<!-- 上传组件封装 -->
|
<el-upload
|
ref="uploadRef"
|
:file-list="fileList"
|
:accept="acceptType"
|
action="#"
|
:multiple="multiple"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:limit="1"
|
:on-exceed="handleExceed"
|
:http-request="uplodFile"
|
:on-change="handleChange"
|
>
|
<slot>
|
<el-button type="primary" :loading="fileLoading">选择文件</el-button>
|
</slot>
|
<template #tip>
|
<div class="el-upload__tip">{{ tips }}</div>
|
</template>
|
</el-upload>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import type {UploadProps} from 'element-plus'
|
import {genFileId, UploadRawFile} from 'element-plus'
|
import createAxios from '@/utils/axios'
|
interface Props {
|
tips?: string
|
multiple?: boolean
|
limitNumber?: number
|
fileList: any
|
acceptType?: string
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
tips: '只能上传.zip .rar .exe格式文件,并且只能上传一个文件',
|
multiple: false,
|
acceptType: '.zip,.rar,.exe',
|
fileList: [],
|
limitNumber: 1
|
})
|
|
const emit = defineEmits(['update:fileList', 'beginUpload', 'removeFile'])
|
const uploadRef = ref()
|
const handleChange = (file: any, fileList: any[]) => {
|
if (fileList.length > 1) {
|
fileList.splice(0, 1)
|
}
|
}
|
|
// 点击预览上传的文件
|
const handlePreview: UploadProps['onPreview'] = uploadFile => {
|
}
|
|
// 移除已经上传的文件
|
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
|
emit('removeFile')
|
}
|
|
// 问价移除前的操作
|
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
|
return ElMessageBox.confirm(` 是否删除${uploadFile.name} ?`).then(
|
() => true,
|
() => false
|
)
|
}
|
|
// 文件超出限制提示
|
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) => {
|
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('文件类型错误')
|
// })
|
// }
|
console.log(option.file.name.length)
|
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('beginUpload')
|
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:fileList', res.data.fileId)
|
resolve(res.msg)
|
} else {
|
// ElMessage.warning(res.msg)
|
}
|
})
|
.finally(() => {
|
fileLoading.value = false
|
})
|
})
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.el-upload__tip {
|
color: #d9001b;
|
}
|
</style>
|
