Vue上传PDF功能
【Vue】上传PDF功能
一、Vue代码结构
Vue 组件的代码通常主要分为以下几个部分：
template：定义组件的 HTML 结构。
script：定义组件的逻辑（数据、方法、生命周期等）。
style：定义组件的样式。
1 template（HTML结构部分）
主界面的按钮点击弹出详情界面的对话框
拖拽文件到此处或 点击上传
支持上传 PDF、Word、TXT 等文档文件
外层容器：el-dialog，这是 Element Plus 提供的对话框组件，用于弹出一个模态窗口。
属性：v-model=“uploadFileDialogVisible”：
使用 Vue 的 v-model 双向绑定控制对话框的显示和隐藏。uploadFileDialogVisible 是一个布尔值，当为 true
时，对话框显示；当为 false 时，对话框隐藏。
title=“上传文件”：设置对话框的标题为“上传文件”。
width=“600px”：设置对话框的宽度为 600 像素。
@open=“handleDialogOpen”：监听对话框打开的事件，当对话框打开时，调用 handleDialogOpen 方法
- 【属性解释】
使用基于 Element Plus 组件库的文件上传组件 (el-upload)，用于实现文件上传功能。
drag：启用拖拽上传功能，用户可以将文件拖拽到上传区域。
multiple：允许用户一次选择多个文件上传。
auto-upload=“false”：设置为 false，表示用户选择文件后不会自动上传，需要手动触发上传操作。
action=“http://140.207xxx:8081/uploadpdf”：指定文件上传的目标地址（后端接口地址）。
on-success=“handleUploadSuccess”：文件上传成功时的回调函数，handleUploadSuccess 是用户自定义的方法。
before-upload=“beforeUpload”：文件上传前的钩子函数，beforeUpload
是用户自定义的方法，通常用于文件校验（如文件类型、大小等）
name=“file”：上传文件的字段名，后端接口通过该字段名获取文件。
accept=“.pdf,.doc,.docx,.md,.txt,.png,.jpg,.jpeg”：限制用户只能选择指定类型的文件（PDF、Word、Markdown、TXT、PNG、JPG）。 - 【插槽内容】 默认插槽：上传区域的内容，包括图标和提示文字。
auto-upload=“false”：设置为 false，表示用户选择文件后不会自动上传，需要手动触发上传操作。
action=“http://140.207xxx:8081/uploadpdf”：指定文件上传的目标地址（后端接口地址）。
on-success=“handleUploadSuccess”：文件上传成功时的回调函数，handleUploadSuccess 是用户自定义的方法。
before-upload=“beforeUpload”：文件上传前的钩子函数，beforeUpload
是用户自定义的方法，通常用于文件校验（如文件类型、大小等）
name=“file”：上传文件的字段名，后端接口通过该字段名获取文件。
accept=“.pdf,.doc,.docx,.md,.txt,.png,.jpg,.jpeg”：限制用户只能选择指定类型的文件（PDF、Word、Markdown、TXT、PNG、JPG）。拖拽文件到此处或 点击上传
el-icon 是 Element Plus 的图标组件，upload-filled 是上传图标。 el-upload__text 是上传区域的提示文字。 tip 插槽：上传区域的额外提示信息。
支持上传 PDF、Word、Markdown、TXT 文件以及 PNG/JPG 图片，单个文件不超过 10MB
外层容器：div class=“upload-list” 这是一个包含已上传文件列表的容器。 class=“upload-list” 是自定义的 CSS 类名，用于样式控制。 v-if=“uploadedFiles.length > 0”：使用 Vue 的 v-if 指令动态控制该容器的显示。 只有当 uploadedFiles 数组的长度大于 0（即有已上传的文件）时，才会渲染该容器。
已上传文件
2 script部分（定义数据、方法）
import {ElUpload ,ElDialog} from ’element-plus’;
JavaScript/TypeScript 中的模块导入语法，用于从 Element Plus 组件库中导入 ElUpload 和 ElDialog
两个组件
import { Plus as IconPlus, Setting, UploadFilled } from ‘@element-plus/icons-vue’
从 @element-plus/icons-vue 图标库中按需导入多个图标的语法。
UploadFilled：一个“上传”图标，通常用于表示文件上传操作。
导出一个 Vue 组件，使其可以在其他文件中被导入和使用。
export default {
name: ‘CommonLayout’,
components: {
ElContainer,
ElAside,
ElMain,
ElIcon,
ElAvatar,
KnowledgeDialog,
Plus,
Files,
ElUpload,
ElDialog,
UploadFilled
},
data 选项，用于定义组件的响应式数据，之前设定了一个表单，初始化为false就开始的时候不会被显示
data() {
return {
isCollapsed: false,
uploadFileDialogVisible: false,
Plus: IconPlus,
Setting
}
在 Vue 中，data 必须是一个函数，返回一个对象。对象中的属性会自动变为响应式的，当数据变化时，视图会自动更新。
isCollapsed: false：这是一个布尔值，通常用于控制某个元素的展开/折叠状态。例如，可以用于控制侧边栏的折叠状态：
uploadFileDialogVisible: false：这是一个布尔值，通常用于控制文件上传对话框的显示和隐藏。
Plus: IconPlus：这是一个图标组件，通常用于在模板中显示“加号”图标。
Setting：这是一个图标组件，通常用于在模板中显示“设置”图标。
methods: {
uploadFile() {
// 添加调试日志
console.log(‘点击上传按钮前:’, this.uploadFileDialogVisible)
this.uploadFileDialogVisible = true
console.log(‘点击上传按钮后:’, this.uploadFileDialogVisible)
},
};
定义组件的方法（函数），用于处理逻辑或响应用户交互。在 Vue 中，methods
是一个对象，包含多个方法。这些方法可以在模板中通过事件绑定或其他方式调用。
但其实有些功能elementui已经封装的很好了，在HTML的地方就已经完成前后端发送消息了，methods这个地方目前是处理前端的逻辑，比如打开视图，打印控制台消息
3 style
主要就是css样式表
二、后端Flask代码结构
1 蓝图
蓝图是 Flask 中用于组织路由和视图函数的工具，可以将应用拆分为多个模块，便于管理和维护。
2 路由处理请求
定义了一个 Flask 蓝图（Blueprint），并为其添加了一个路由，用于处理文件上传的 POST 请求。 upload_bp = Blueprint(‘upload_bp’, name) @upload_bp.route(’/upload’, methods=[‘POST’]) def upload(): 视图函数 upload 是处理文件上传的核心逻辑部分。 def upload(): try: print("\n=== 开始处理文件上传请求 ===")
检查是否有文件被上传
if ‘file’ not in request.files: return jsonify({ ‘code’: 400, ‘message’: ‘没有文件被上传’ }), 400 file = request.files[‘file’]
检查文件名是否为空
if file.filename == ‘’: return jsonify({ ‘code’: 400, ‘message’: ‘未选择文件’ }), 400
检查是否是PDF文件
if not file.filename.endswith(’.pdf’): return jsonify({ ‘code’: 400, ‘message’: ‘只能上传PDF文件’ }), 400
构建保存路径
save_path = os.path.join(DATABASES_FOLDER, “upload_pdf”)
确保目录存在
os.makedirs(save_path, exist_ok=True)
保存文件
file_path = os.path.join(save_path, file.filename) file.save(file_path) print(f"文件已保存到: {file_path}") print("=== 文件上传处理完成 ===\n") return jsonify({ ‘code’: 200, ‘message’: ‘文件上传成功’, ‘filename’: file.filename }), 200 except Exception as e: print(f"文件上传出错: {str(e)}") return jsonify({ ‘code’: 500, ‘message’: f’文件上传失败: {str(e)}’ }), 500 使用 request.files 获取上传的文件。 使用 os.path.join 构建文件保存路径。DATABASES_FOLDER 是一个常量，表示文件保存的根目录。使用 file.save 将文件保存到指定路径。