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

5. 前后端实现文件上传与解析

1. 说明

在实际开发中,比较常见的一个功能是需要在前端页面中选择系统中的某个文件上传到服务器中进行解析,解析后的文件内容可以用来在服务器中当作参数,或者传递给其它组件使用,或者需要存储到数据库中。所以本文就提供一种方式来实现这样的功能。

2. 具体步骤

主要需要完成两步骤:一是前端实现文件上传,二是后端实现文件接收与保存
说明:前端框架是vue2,具体框架代码可以参考前面的系列文章

2.1 前端文件上传

首先,前端负责文件上传的控件直接使用input标签即可,然后在提供一个文件上传的按钮,页面简单布局代码如下:

<template><div><input class=“inputfile” type=“file” id=“testuploadfile”><el-button @click=“uploadFile” type=“success” plain></el-button></div>
</template>

之后,就是实现上面为button按钮绑定的触发事件uploadFile,具体代码如下:

async uploadFile()
{//先找到input控件,获取其上传的文件const fileInput = document.getElementById(‘testuploadfile’);if(!fileInput.files.length){alert(‘请选择文件’);return;}//获取文件const file = fileInput.files[0];if(file){//创建一个表单,用于上传const formData = new formData();formData.append(‘file’,file);//尝试调用后端接口进行上传try{axios.post(/api/parseFile’, formData, {headers:{‘Content-Type’:’multiparty/form-data’}}).then(response => {if(response.data.status === ‘success’){alert(‘解析成功’);}else{alert(‘解析失败’);}});}catch(error){if(axios.isCancel(error)){console.log(‘upload canceled’, error.message);}else{console.log(‘Error upload file:, error);}}}
}
2.2 后端文件接收

本文中后端设置的对应接口,其功能相对简单,读者可以根据自身业务需求在此基础上进行扩展,比如对接收到的文件内容尽心读取更改什么的,本文中只是为了实现前后端文件的上传与接收,所以此处的代码只时对文件进行了保存,具体代码如下:

from flask import Flask, request, jsonify
from flask_cors import CORS
from werkzeug.utility import secure_filename
import osapp = Flask(__name__)
CORS(app)@app.route(/parseFile’, methods=[‘POST’])
def parseFile():# 使用request接收文件file = request.files[file]	# 注意:这里的名称‘file’,要和前端formData中填写的标签保持一致formData.append(‘file’, file)# 保存文件if file:# 获取文件名filename = secure_filename(file.filename)# 保存文件到指定路径file_dir = os.path.join(./files/,’test’)if not os.path.exists(file_dir):os.makedirs(file_dir)file_path = os.path.join(file_dir, filename)file.save(file_path)return jsonify({‘status’:’success’,’message’:’接收文件{filename}成功’,}),200if __name__ == ‘__main__’:app.run(host=0.0.0.0,debug=True)

结束

相关文章:

5. 前后端实现文件上传与解析

1. 说明 在实际开发中&#xff0c;比较常见的一个功能是需要在前端页面中选择系统中的某个文件上传到服务器中进行解析&#xff0c;解析后的文件内容可以用来在服务器中当作参数&#xff0c;或者传递给其它组件使用&#xff0c;或者需要存储到数据库中。所以本文就提供一种方式…...

SpringBoot 接入 豆包 火山方舟大模型

火山方舟控制台 开通模型推理、知识库 应用入口&#xff1b; 文档中心 各类接口说明及SDK 获取&#xff1b; 向量数据库VikingDB 文档 下翻找到有java操作案例&#xff1b; 实现目标功能效果&#xff1a; 通过SDK调用 豆包大模型&#xff0c;在代码内实现问答的效果&#xf…...

IDEA接入阿里云百炼中免费的通义千问[2025版]

安装deepseek 上一篇文章IDEA安装deepseek最新教程2025中说明了怎么用idea安装codeGPT插件&#xff0c;并接入DeepSeek&#xff0c;无奈接入的官方api已经不能使用了&#xff0c;所以我们尝试从其他地方接入 阿里云百炼https://bailian.console.aliyun.com/ 阿里云百炼‌是阿…...

下载kali linux遇到的一些问题

kali官网&#xff1a;kali官网跳转 问题一&#xff1a;未启动VM Service VMware Workstation 未能启动 VMware Authorization Service。您可以尝试手动启动VMware Authorization Service。如果此问题仍然存在&#xff0c;请联系VMware 支持部门。 解决办法&#xff1a; 步骤1…...

常见排序算法深度评测:从原理到10万级数据实战

常见排序算法深度评测&#xff1a;从原理到10万级数据实战 摘要 本文系统解析冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序、堆排序和基数排序8种经典算法&#xff0c;通过C语言实现10万随机数排序并统计耗时。测试显示&#xff1a;快速排序综合性能最优&…...

Scaled_dot_product_attention(SDPA)使用详解

在学习huggingFace的Transformer库时&#xff0c;我们不可避免会遇到scaled_dot_product_attention(SDPA)这个函数&#xff0c;它被用来加速大模型的Attention计算&#xff0c;本文就详细介绍一下它的使用方法&#xff0c;核心内容主要参考了torch.nn.functional中该函数的注释…...

Linux练级宝典->Linux进程概念介绍

目录 进程基本概念 PCB概念 task_struct tack_struct内容分类 PID和PPID fork函数创建子进程 进程优先级概念 4个名词 进程地址空间 进程地址空间的意义 内核进程调度队列 优先级 活动队列 过期队列 进程基本概念 一个正在执行的程序。担当分配系统资源的实体&#…...

OpenHarmony 5.0 mpegts封装的H265视频播放失败的解决方案

问题现象 OpenHarmony 5.0版本使用AVPlayer播放mpegts封装格式的H.265(HEVC)编码格式的视频时出现报错导致播放失败 问题原因 OpenHarmony 5.0版本AVPlayer播放器使用histreamer引擎&#xff0c;因为 libav_codec_hevc_parser.z.so 动态库未开源导致H265编码格式视频解析不到…...

Qt从入门到入土(九) -model/view(模型/视图)框架

简介 Qt的模型/视图&#xff08;Model/View&#xff09;架构是一种用于分离数据处理和用户界面展示的设计模式。它允许开发者将数据存储和管理&#xff08;模型&#xff09;与数据的显示和交互&#xff08;视图&#xff09;解耦&#xff0c;从而提高代码的可维护性和可扩展性。…...

缓存之美:Guava Cache 相比于 Caffeine 差在哪里?

大家好&#xff0c;我是 方圆。本文将结合 Guava Cache 的源码来分析它的实现原理&#xff0c;并阐述它相比于 Caffeine Cache 在性能上的劣势。为了让大家对 Guava Cache 理解起来更容易&#xff0c;我们还是在开篇介绍它的原理&#xff1a; Guava Cache 通过分段&#xff08;…...

[漏洞篇]XSS漏洞详解

[漏洞篇]XSS漏洞 一、 介绍 概念 XSS&#xff1a;通过JS达到攻击效果 XSS全称跨站脚本(Cross Site Scripting)&#xff0c;为避免与层叠样式表(Cascading Style Sheets, CSS)的缩写混淆&#xff0c;故缩写为XSS。这是一种将任意 Javascript 代码插入到其他Web用户页面里执行以…...

【Leetcode 每日一题】2269. 找到一个数字的 K 美丽值

问题背景 一个整数 n u m num num 的 k k k 美丽值定义为 n u m num num 中符合以下条件的 子字符串 数目&#xff1a; 子字符串长度为 k k k。子字符串能整除 n u m num num。 给你整数 n u m num num 和 k k k&#xff0c;请你返回 n u m num num 的 k k k 美丽值…...

IO进程线程(线程)

作业 1.创建两个线程&#xff0c;分支线程1拷贝文件的前一部分&#xff0c;分支线程2拷贝文件的后一部分 2.创建三个线程&#xff0c;实现线程A打印A&#xff0c;线程B打印B&#xff0c;线程C打印C&#xff1b;重复打印顺序ABC。 信号量实现&#xff1a; 条件变量实现&#x…...

1-002:MySQL InnoDB引擎中的聚簇索引和非聚簇索引有什么区别?

在 MySQL InnoDB 存储引擎 中&#xff0c;索引主要分为 聚簇索引&#xff08;Clustered Index&#xff09; 和 非聚簇索引&#xff08;Secondary Index&#xff09;。它们的主要区别如下&#xff1a; 1. 聚簇索引&#xff08;Clustered Index&#xff09; 定义 聚簇索引是表数…...

tomcat单机多实例部署

一、部署方法 多实例可以运行多个不同的应用&#xff0c;也可以运行相同的应用&#xff0c;类似于虚拟主机&#xff0c;但是他可以做负载均衡。 方式一&#xff1a; 把tomcat的主目录挨个复制&#xff0c;然后把每台主机的端口给改掉就行了。 优点是最简单最直接&#xff0c;…...

论文阅读分享——UMDF(AAAI-24)

概述 题目&#xff1a;A Unified Self-Distillation Framework for Multimodal Sentiment Analysis with Uncertain Missing Modalities 发表&#xff1a;The Thirty-Eighth AAAI Conference on Artificial Intelligence (AAAI-24) 年份&#xff1a;2024 Github&#xff1a;暂…...

解决asp.net mvc发布到iis下安全问题

解决asp.net mvc发布到iis下安全问题 环境信息1.The web/application server is leaking version information via the "Server" HTTP response2.确保您的Web服务器、应用程序服务器、负载均衡器等已配置为强制执行Strict-Transport-Security。3.在HTML提交表单中找不…...

概念|RabbitMQ 消息生命周期 待消费的消息和待应答的消息有什么区别

目录 消息生命周期 一、消息创建与发布阶段 二、消息路由与存储阶段 三、消息存活与过期阶段 四、消息投递与消费阶段 五、消息生命周期终止 关键配置建议 待消费的消息和待应答的消息 一、待消费的消息&#xff08;Unconsumed Messages&#xff09; 二、待应答的消息…...

springboot三层架构详细讲解

目录 springBoot三层架构 0.简介1.各层架构 1.1 Controller层1.2 Service层1.3 ServiceImpl1.4 Mapper1.5 Entity1.6 Mapper.xml 2.各层之间的联系 2.1 Controller 与 Service2.2 Service 与 ServiceImpl2.3 Service 与 Mapper2.4 Mapper 与 Mapper.xml2.5 Service 与 Entity2…...

2025最新群智能优化算法:云漂移优化(Cloud Drift Optimization,CDO)算法求解23个经典函数测试集,MATLAB

一、云漂移优化算法 云漂移优化&#xff08;Cloud Drift Optimization&#xff0c;CDO&#xff09;算法是2025年提出的一种受自然现象启发的元启发式算法&#xff0c;它模拟云在大气中漂移的动态行为来解决复杂的优化问题。云在大气中受到各种大气力的影响&#xff0c;其粒子的…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

深度学习水论文:mamba+图像增强

&#x1f9c0;当前视觉领域对高效长序列建模需求激增&#xff0c;对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模&#xff0c;以及动态计算优势&#xff0c;在图像质量提升和细节恢复方面有难以替代的作用。 &#x1f9c0;因此短时间内&#xff0c;就有不…...