odboy
df6dc89b96
- 新增 CuteProductLineSelect 组件API接口 - 重命名 SystemComponentController 为 CuteProductLineSelectProApi - 迁移部门选择数据源接口到新API路径 - 更新前端组件导入路径和API调用方式 - 修改 CuteDeptTree 组件分页大小限制 - 为文件上传组件添加上传方式配置选项 - 调整字典详情和定时任务模块的API导入路径
86 lines
2.0 KiB
Vue
86 lines
2.0 KiB
Vue
<!--
|
|
* 文件上传组件
|
|
* @author odboy
|
|
* @email tianjun@odboy.cn
|
|
* @created 2025-07-29
|
|
-->
|
|
<template>
|
|
<el-upload
|
|
ref="upload"
|
|
:limit="1"
|
|
:before-upload="beforeUpload"
|
|
:auto-upload="true"
|
|
:headers="headers"
|
|
:on-success="handleSuccess"
|
|
:on-error="handleError"
|
|
:action="ossUploadApi"
|
|
>
|
|
<el-button size="small" type="primary">点击上传</el-button>
|
|
<div slot="tip" class="el-upload__tip">只能上传不超过100MB的文件</div>
|
|
</el-upload>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex'
|
|
import { getToken } from '@/utils/auth'
|
|
import CsMessage from '@/utils/elementui/CsMessage'
|
|
|
|
export default {
|
|
name: 'CuteFileUpload',
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
required: true,
|
|
default: null
|
|
},
|
|
/**
|
|
* 上传方式：server、oss
|
|
*/
|
|
mode: {
|
|
type: String,
|
|
required: true,
|
|
default: 'oss'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
headers: { 'Authorization': getToken() }
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'baseApi',
|
|
'ossUploadApi'
|
|
])
|
|
},
|
|
methods: {
|
|
beforeUpload(file) {
|
|
let isLt2M = true
|
|
isLt2M = file.size / 1024 ** 2 < 100
|
|
if (!isLt2M) {
|
|
this.$message.error('上传文件大小不能超过 100MB')
|
|
return false
|
|
}
|
|
return isLt2M
|
|
},
|
|
// 监听上传失成功
|
|
handleSuccess(response, file, fileList) {
|
|
// this.$refs.upload.clearFiles()
|
|
// console.error('response', response)
|
|
// console.error('file', file)
|
|
// console.error('fileList', fileList)
|
|
this.value.fileUrl = response
|
|
// 绑定on-success事件
|
|
this.$emit('on-success', response, file, fileList)
|
|
},
|
|
// 监听上传失败
|
|
handleError(e, file, fileList) {
|
|
const msg = JSON.parse(e.message)
|
|
CsMessage.Error(msg.message)
|
|
// 绑定on-error事件
|
|
this.$emit('on-error', e, file, fileList)
|
|
}
|
|
}
|
|
}
|
|
</script>
|