Compare commits
2 Commits
7dd6d4cf53
...
b9ced5e520
| Author | SHA1 | Date |
|---|---|---|
 betaqi
|
b9ced5e520 | 3 weeks ago |
taqi be
|
20f896632f | 1 month ago |
10 changed files with 256 additions and 24 deletions
@ -1,2 +1,2 @@
@@ -1,2 +1,2 @@
|
||||
VITE_BASE_URL = 'http://192.168.1.3:48080' |
||||
VITE_SOCKET_SERVER = 'http://192.168.1.3:48080' |
||||
VITE_BASE_URL = 'http://192.168.1.3:48081' |
||||
VITE_SOCKET_SERVER = 'http://192.168.1.3:48081' |
||||
|
||||
@ -0,0 +1,188 @@
@@ -0,0 +1,188 @@
|
||||
<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