|
@@ -2,7 +2,7 @@
|
|
|
* @Author: ChenYaJin
|
|
|
* @Date: 2021-06-16 14:21:39
|
|
|
* @LastEditors: LiZhiWei
|
|
|
- * @LastEditTime: 2025-04-16 14:19:19
|
|
|
+ * @LastEditTime: 2025-04-17 12:11:59
|
|
|
* @Description: 文件柜-预览文件
|
|
|
-->
|
|
|
<template>
|
|
@@ -19,6 +19,10 @@
|
|
|
<el-button type="primary" :loading="downloading" @click="handleDownload" style="margin-left: 10px;">
|
|
|
预览文件
|
|
|
</el-button>
|
|
|
+ <el-upload class="upload-demo" action="" :show-file-list="false" :auto-upload="false"
|
|
|
+ :on-change="handleFileChange">
|
|
|
+ <el-button type="primary" style="margin-left: 10px;">选择本地文件</el-button>
|
|
|
+ </el-upload>
|
|
|
</template>
|
|
|
</w-header>
|
|
|
<div class="modal-height">
|
|
@@ -324,6 +328,74 @@ export default {
|
|
|
this.renderLoading = false
|
|
|
})
|
|
|
},
|
|
|
+ async handleFileChange(file) {
|
|
|
+ if (!file) {
|
|
|
+ this.$message.warning('请选择文件')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.downloading = true
|
|
|
+ this.loadLoading = true
|
|
|
+ this.renderLoading = true
|
|
|
+ this.showError = false
|
|
|
+ this.percentage = 0
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 获取文件类型
|
|
|
+ const fileName = file.name
|
|
|
+ const fileType = fileName.split('.').pop().toLowerCase()
|
|
|
+
|
|
|
+ // 检查文件类型是否支持
|
|
|
+ const typeObject = {
|
|
|
+ doc: ['docx'],
|
|
|
+ xlsx: ['xlsx'],
|
|
|
+ pdf: ['pdf'],
|
|
|
+ ppt: ['pptx'],
|
|
|
+ image: ['gif', 'jpg', 'jpeg', 'bmp', 'tiff', 'tif', 'png', 'svg'],
|
|
|
+ text: ['txt', 'json', 'js', 'css', 'java', 'py', 'html', 'jsx', 'ts', 'tsx', 'xml', 'md', 'log']
|
|
|
+ }
|
|
|
+ const ablePreviewTypes = Object.values(typeObject).flat()
|
|
|
+
|
|
|
+ if (!ablePreviewTypes.includes(fileType)) {
|
|
|
+ throw new Error('不支持的文件类型')
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新文件信息
|
|
|
+ this.file = {
|
|
|
+ name: fileName.split('.')[0],
|
|
|
+ type: fileType,
|
|
|
+ size: file.size / 1024
|
|
|
+ }
|
|
|
+ this.currentFile = { ...this.file }
|
|
|
+
|
|
|
+ // 读取文件
|
|
|
+ const arrayBuffer = await new Promise((resolve, reject) => {
|
|
|
+ const reader = new FileReader()
|
|
|
+ reader.onload = () => resolve(reader.result)
|
|
|
+ reader.onerror = reject
|
|
|
+ reader.readAsArrayBuffer(file.raw)
|
|
|
+
|
|
|
+ reader.onprogress = (event) => {
|
|
|
+ if (event.lengthComputable) {
|
|
|
+ const percentage = Number(Number(event.loaded / event.total) * 100).toFixed(2)
|
|
|
+ this.percentage = Number(percentage)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 渲染文件
|
|
|
+ await this.renderResult(arrayBuffer, fileType)
|
|
|
+ this.$message.success('文件加载成功')
|
|
|
+
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error('文件加载失败:' + error.message)
|
|
|
+ this.showError = true
|
|
|
+ } finally {
|
|
|
+ this.downloading = false
|
|
|
+ this.loadLoading = false
|
|
|
+ this.renderLoading = false
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -396,3 +468,7 @@ export default {
|
|
|
line-height: 40px;
|
|
|
}
|
|
|
</style>
|
|
|
+.upload-demo {
|
|
|
+display: inline-block;
|
|
|
+}
|
|
|
+</style>
|