【Vue】上传PDF功能
目录
- 一、Vue代码结构
- 1. template(HTML结构部分)
- 2. script部分(定义数据、方法)
- 3. style
- 二、后端Flask代码结构
- 1. 蓝图
- 2. 路由处理请求
一、Vue代码结构
Vue 组件的代码通常主要分为以下几个部分:
template:定义组件的 HTML 结构。
script:定义组件的逻辑(数据、方法、生命周期等)。
style:定义组件的样式。
1. template(HTML结构部分)
主界面的按钮点击弹出详情界面的对话框
<el-dialog
v-model="uploadFileDialogVisible"
title="上传文件"
width="600px"
@open="handleDialogOpen"
>
<el-upload
class="upload-demo"
drag
action="http://140.207.201.32:8090/upload/upload"
multiple
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
拖拽文件到此处或 <em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">
支持上传 PDF、Word、TXT 等文档文件
</div>
</template>
</el-upload>
</el-dialog>
外层容器: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)。 - 【插槽内容】
默认插槽:上传区域的内容,包括图标和提示文字。
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
拖拽文件到此处或 <em>点击上传</em>
</div>
el-icon 是 Element Plus 的图标组件,upload-filled 是上传图标。
el-upload__text 是上传区域的提示文字。
tip 插槽:上传区域的额外提示信息。
<template #tip>
<div class="el-upload__tip">支持上传 PDF、Word、Markdown、TXT 文件以及 PNG/JPG 图片,单个文件不超过 10MB</div>
</template>
外层容器:div class=“upload-list” 这是一个包含已上传文件列表的容器。
class=“upload-list” 是自定义的 CSS 类名,用于样式控制。
v-if=“uploadedFiles.length > 0”:使用 Vue 的 v-if 指令动态控制该容器的显示。
只有当 uploadedFiles 数组的长度大于 0(即有已上传的文件)时,才会渲染该容器。
<!-- 显示上传列表 -->
<div class="upload-list" v-if="uploadedFiles.length > 0">
<h4>已上传文件</h4>
<el-table :data="uploadedFiles" style="width: 100%">
<el-table-column prop="name" label="文件名" />
<el-table-column prop="size" label="大小" width="120" />
<el-table-column prop="status" label="状态" width="120" />
</el-table>
</div>
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 将文件保存到指定路径。