Compare commits
No commits in common. 'b9ced5e520f30c1972507293db9d58782d2d2f23' and '7dd6d4cf5325024526df8e8fd46558818fd43a06' have entirely different histories.
b9ced5e520
...
7dd6d4cf53
10 changed files with 24 additions and 256 deletions
@ -1,2 +1,2 @@ |
|||||||
VITE_BASE_URL = 'http://192.168.1.3:48081' |
VITE_BASE_URL = 'http://192.168.1.3:48080' |
||||||
VITE_SOCKET_SERVER = 'http://192.168.1.3:48081' |
VITE_SOCKET_SERVER = 'http://192.168.1.3:48080' |
||||||
|
|||||||
@ -1,188 +0,0 @@ |
|||||||
<template> |
|
||||||
<EdfsDialog |
|
||||||
@on-close="onClone" |
|
||||||
@on-save="onSave" |
|
||||||
title="上传Markdown文件" |
|
||||||
:is-show="isShow" |
|
||||||
:btn-loading="loading" |
|
||||||
width="44%" |
|
||||||
class="upload-MD-dlg" |
|
||||||
> |
|
||||||
<div class="dlg-body"> |
|
||||||
<el-upload |
|
||||||
v-model:fileList="fileList" |
|
||||||
drag |
|
||||||
action="" |
|
||||||
accept=".md" |
|
||||||
:limit="1" |
|
||||||
:on-exceed="handleExceed" |
|
||||||
:auto-upload="false" |
|
||||||
ref="upload" |
|
||||||
class="upload-container" |
|
||||||
> |
|
||||||
<el-icon class="upload-icon"> |
|
||||||
<IEpUploadFilled /> |
|
||||||
</el-icon> |
|
||||||
<div class="text">拖拽文件或者 <em>点击上传</em></div> |
|
||||||
<template #tip v-if="!fileList.length"> |
|
||||||
<div class="el-upload__tip">上传限制一个文件，新文件会覆盖旧文件</div> |
|
||||||
</template> |
|
||||||
</el-upload> |
|
||||||
</div> |
|
||||||
</EdfsDialog> |
|
||||||
</template> |
|
||||||
|
|
||||||
<script setup lang="ts"> |
|
||||||
import EdfsDialog from '@/components/dashboard/Edfs-dialog.vue' |
|
||||||
import type { |
|
||||||
UploadInstance, |
|
||||||
UploadProps, |
|
||||||
UploadRawFile, |
|
||||||
UploadUserFile, |
|
||||||
} from 'element-plus' |
|
||||||
import { useMessage } from '@/hooks/useMessage.js' |
|
||||||
|
|
||||||
const message = useMessage() |
|
||||||
|
|
||||||
interface Props { |
|
||||||
isShow: boolean |
|
||||||
} |
|
||||||
|
|
||||||
const emits = defineEmits(['on-save', 'on-close']) |
|
||||||
const props = withDefaults(defineProps<Props>(), { |
|
||||||
isShow: false, |
|
||||||
}) |
|
||||||
|
|
||||||
const fileList = ref<UploadUserFile[]>([]) |
|
||||||
const fileName = ref('') |
|
||||||
const fileContent = ref('') |
|
||||||
|
|
||||||
const upload = ref<UploadInstance>() |
|
||||||
const handleExceed: UploadProps['onExceed'] = files => { |
|
||||||
upload.value!.clearFiles() |
|
||||||
const file = files[0] as UploadRawFile |
|
||||||
|
|
||||||
upload.value!.handleStart(file) |
|
||||||
} |
|
||||||
|
|
||||||
function readFileContent( |
|
||||||
file: UploadUserFile |
|
||||||
): Promise<{ type: string; message: string }> { |
|
||||||
const fileData = file.raw as File |
|
||||||
fileName.value = fileData.name |
|
||||||
|
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
const reader = new FileReader() |
|
||||||
reader.onload = e => { |
|
||||||
if (e.target) { |
|
||||||
resolve({ |
|
||||||
type: 'success', |
|
||||||
message: e.target?.result as string, |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
reader.onerror = () => { |
|
||||||
reject({ |
|
||||||
type: 'error', |
|
||||||
message: '文件读取失败', |
|
||||||
}) |
|
||||||
} |
|
||||||
reader.readAsText(fileData) // 读取文件 |
|
||||||
}) |
|
||||||
} |
|
||||||
|
|
||||||
function validate() { |
|
||||||
if (!fileList.value.length) { |
|
||||||
message.error('请上传文件') |
|
||||||
return true |
|
||||||
} |
|
||||||
return false |
|
||||||
} |
|
||||||
const loading = ref(false) |
|
||||||
async function onSave() { |
|
||||||
if (validate()) return |
|
||||||
// 限制上传文件大小 |
|
||||||
|
|
||||||
loading.value = true |
|
||||||
const res = await readFileContent(fileList.value[0]) |
|
||||||
loading.value = false |
|
||||||
|
|
||||||
if (res.type === 'error') { |
|
||||||
message.error(res.message) |
|
||||||
return |
|
||||||
} |
|
||||||
fileContent.value = res.message |
|
||||||
emits('on-save', fileName.value, fileContent.value) |
|
||||||
onClone() |
|
||||||
} |
|
||||||
|
|
||||||
function clearData() { |
|
||||||
fileName.value = '' |
|
||||||
fileContent.value = '' |
|
||||||
fileList.value = [] |
|
||||||
} |
|
||||||
function onClone() { |
|
||||||
clearData() |
|
||||||
emits('on-close') |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<style scoped lang="scss"> |
|
||||||
.upload-MD-dlg { |
|
||||||
.el-row { |
|
||||||
height: 32px; |
|
||||||
margin-bottom: 20px; |
|
||||||
:deep(.label) { |
|
||||||
margin-right: 10px; |
|
||||||
} |
|
||||||
|
|
||||||
span { |
|
||||||
width: 110px; |
|
||||||
height: 32px; |
|
||||||
line-height: 32px; |
|
||||||
text-align: right; |
|
||||||
} |
|
||||||
:deep(.el-radio-group) { |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
:deep(.el-radio) { |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
} |
|
||||||
.require { |
|
||||||
color: red; |
|
||||||
margin-right: 4px; |
|
||||||
} |
|
||||||
.upload { |
|
||||||
height: 156px; |
|
||||||
:deep(.upload-container) { |
|
||||||
width: calc(100% - 210px); |
|
||||||
height: calc(100% - 20px); |
|
||||||
} |
|
||||||
:deep(.el-upload) { |
|
||||||
height: 100%; |
|
||||||
width: 100%; |
|
||||||
} |
|
||||||
:deep(.el-upload-dragger) { |
|
||||||
height: 100%; |
|
||||||
width: 100%; |
|
||||||
padding-top: 30px; |
|
||||||
box-sizing: border-box; |
|
||||||
} |
|
||||||
|
|
||||||
.upload-icon { |
|
||||||
font-size: 54px; |
|
||||||
color: #c0c4cc; |
|
||||||
} |
|
||||||
.text { |
|
||||||
color: #6c6c6c; |
|
||||||
font-size: 14px; |
|
||||||
text-align: center; |
|
||||||
} |
|
||||||
em { |
|
||||||
color: #409eff; |
|
||||||
cursor: pointer; |
|
||||||
} |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
Loading…
Reference in new issue