feat(knowledge): 文件可拖拽上传

- 移除一键处理按钮的多余条件判断- 添加文件拖拽功能,包括拖入、拖出和掉落事件处理
- 修改文件上传区域样式,增加拖拽相关样式
- 优化 OCR 协助处理选项的显示逻辑
- 修复文档 ID 的获取路径
This commit is contained in:
du.meimei
2025-04-16 20:02:16 +08:00
parent 1b4731835f
commit 45bbbc50ef
2 changed files with 29 additions and 5 deletions

View File

@@ -13,7 +13,14 @@
</el-form-item> </el-form-item>
<!-- 文件上传--> <!-- 文件上传-->
<el-form-item label="" required prop="file"> <el-form-item label="" required prop="file">
<div @click="createFiled" class="upload-demo"> <div
@click="createFiled"
@dragover.prevent="handleDragOver"
@dragleave.prevent="handleDragLeave"
@drop.prevent="handleDrop"
class="upload-demo"
:class="{ 'drag-over': isDragOver }"
>
<el-empty v-if="!filed"> <el-empty v-if="!filed">
<template #description> <template #description>
<p>点击或将文件拖拽到这里上传</p> <p>点击或将文件拖拽到这里上传</p>
@@ -50,7 +57,7 @@
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="是否ocr协助处理" required prop="beOcr"> <el-form-item label="是否ocr协助处理" v-if="form.beMinerU" required prop="beOcr">
<template slot="label"> <template slot="label">
是否ocr协助处理 是否ocr协助处理
<el-tooltip class="item" effect="dark" content="能更好的协助处理图片、表格类数据" placement="top"> <el-tooltip class="item" effect="dark" content="能更好的协助处理图片、表格类数据" placement="top">
@@ -91,7 +98,8 @@ export default {
datasetId: this.$route.query.datasetId datasetId: this.$route.query.datasetId
}, },
previewDialogVisible: false, // 添加对话框显示控制变量 previewDialogVisible: false, // 添加对话框显示控制变量
documentId: '1361400636462174208' documentId: '',
isDragOver: false
} }
}, },
props: {}, props: {},
@@ -133,7 +141,7 @@ export default {
formData.append('beOcr', this.form.beOcr) formData.append('beOcr', this.form.beOcr)
} }
api(formData).then(response => { api(formData).then(response => {
this.documentId = response.content.content this.documentId = response.content.content.id
// 向上导入documentId // 向上导入documentId
this.$emit('getDocumentId', this.documentId) this.$emit('getDocumentId', this.documentId)
// 文件内容 // 文件内容
@@ -145,7 +153,19 @@ export default {
} }
}) })
}, },
handleDragOver() {
this.isDragOver = true
},
handleDragLeave() {
this.isDragOver = false
},
handleDrop(event) {
this.isDragOver = false
const files = event.dataTransfer.files
this.filed = files[0]
},
handleUploadSuccess(response, file) { handleUploadSuccess(response, file) {
this.fieldList = [file] this.fieldList = [file]
this.uploadLoading = false this.uploadLoading = false
@@ -202,6 +222,10 @@ export default {
&:hover { &:hover {
border-color: #409eff; border-color: #409eff;
} }
&.drag-over {
border-color: #409eff;
background-color: #ecf5ff;
}
/deep/ .el-upload { /deep/ .el-upload {
width: 100%; width: 100%;

View File

@@ -23,7 +23,7 @@
</div> </div>
</div> </div>
<div class="card-bottom"> <div class="card-bottom">
<el-button v-if="active === 0 && $refs.stepPreprocessing && $refs.stepPreprocessing.form.radio === '2'" type="primary" size="medium" @click="fetchApi"> <el-button v-if="active === 0" type="primary" size="medium" @click="fetchApi">
一键处理 一键处理
</el-button> </el-button>
<el-button size="medium" @click="active--" v-if="active >= 1">上一步</el-button> <el-button size="medium" @click="active--" v-if="active >= 1">上一步</el-button>