odboy
afbdbbdea8
- 新增 IsNotBlank 和 IsBlank 工具函数用于字符串空值判断 - 添加数字输入框组件支持，包括最小值、最大值、步长、精度配置 - 集成文件拖拽上传功能，支持本地模式上传 - 优化表单验证规则，支持不同字段类型的精确验证 - 更新下拉选择框支持多选和过滤功能 - 修改表单容器样式增加内边距提升用户体验 - 修复字段禁用状态绑定错误问题 - 扩展表单类型定义文档，新增 number 和 upload 类型说明
98 lines
2.4 KiB
Vue
98 lines
2.4 KiB
Vue
<!--
|
||
* 文件上传组件：支持拖拽上传
|
||
* @author odboy
|
||
* @email tianjun@odboy.cn
|
||
* @created 2025-07-29
|
||
-->
|
||
<template>
|
||
<el-upload
|
||
ref="upload"
|
||
drag
|
||
:limit="1"
|
||
:before-upload="beforeUpload"
|
||
:auto-upload="true"
|
||
:headers="headers"
|
||
:on-success="handleSuccess"
|
||
:on-error="handleError"
|
||
:action="mode === 'oss' ? ossUploadApplicationApi: fileUploadApplicationApi"
|
||
>
|
||
<i class="el-icon-upload" />
|
||
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
|
||
<div slot="tip" class="el-upload__tip">只能上传不超过100MB的文件</div>
|
||
</el-upload>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters } from 'vuex'
|
||
import { getToken } from '@/utils/auth'
|
||
import KitMessage from '@/utils/elementui/KitMessage'
|
||
|
||
export default {
|
||
name: 'CuteFileDragUpload',
|
||
props: {
|
||
value: {
|
||
type: String,
|
||
required: false,
|
||
default: null
|
||
},
|
||
/**
|
||
* 上传方式：local、oss
|
||
*/
|
||
mode: {
|
||
type: String,
|
||
required: true,
|
||
default: 'oss'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
headers: { 'Authorization': getToken() }
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
'baseApi',
|
||
'fileUploadApplicationApi',
|
||
'ossUploadApplicationApi'
|
||
])
|
||
},
|
||
methods: {
|
||
beforeUpload(file) {
|
||
let isLt2M = true
|
||
isLt2M = file.size / 1024 ** 2 < 100
|
||
if (!isLt2M) {
|
||
KitMessage.Error('上传文件大小不能超过 100MB')
|
||
return false
|
||
}
|
||
return isLt2M
|
||
},
|
||
// 监听上传失成功
|
||
handleSuccess(response, file, fileList) {
|
||
KitMessage.Success('上传成功')
|
||
// this.$refs.upload.clearFiles()
|
||
// console.error('response', response)
|
||
// console.error('file', file)
|
||
// console.error('fileList', fileList)
|
||
// 绑定on-success事件
|
||
this.$emit('on-success', response, file, fileList)
|
||
this.$emit('change', response)
|
||
this.$emit('input', response)
|
||
},
|
||
// 监听上传失败
|
||
handleError(e, file, fileList) {
|
||
const msg = JSON.parse(e.message)
|
||
KitMessage.Error(msg.message)
|
||
// 绑定on-error事件
|
||
this.$emit('on-error', e, file, fileList)
|
||
this.$emit('change', null)
|
||
this.$emit('input', null)
|
||
},
|
||
resetField() {
|
||
this.$refs.upload.clearFiles()
|
||
this.$emit('change', null)
|
||
this.$emit('input', null)
|
||
}
|
||
}
|
||
}
|
||
</script>
|