当前位置: 首页 > article >正文

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


http://www.kler.cn/a/588537.html

相关文章:

  • 鸿蒙路由 HMrouter 配置及使用一
  • Android笔记:Android平台下SVG格式的解析与实践
  • PyTorch使用-张量数值计算
  • 每日Attention学习27——Patch-based Graph Reasoning
  • 【从零开始学习计算机科学】软件工程(六)软件质量
  • Docker基础知识介绍
  • 【Python+HTTP接口】POST请求不同请求头构造
  • 【ASMbits--常用算术运算指令】
  • 深入解析 FID:深度学习生成模型评价指标
  • pyQT学习笔记——Qt常用组件与绘图类的使用指南
  • 【商城实战(36)】UniApp性能飞升秘籍:从渲染到编译的深度优化
  • 使用memmove优化插入排序
  • 软件架构设计习题及复习
  • 计算机网络——NAT
  • 【Linux】Socket 编程 TCP
  • 《Python深度学习》第四讲:计算机视觉中的深度学习
  • 在Simulink中将Excel数据导入可变负载模块的方法介绍
  • 工程化与框架系列(30)--前端日志系统实现
  • cursor全栈网页开发最合适的技术架构和开发语言
  • JVM系统变量的妙用