【Vue】上传PDF功能

一、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 将文件保存到指定路径。