bootstrapvue上传文件并存储到服务器指定路径及从服务器某路径下载文件
前记
第一次接触上传及下载文件,做个总结。
从浏览器上传本地文件
前端
- 本处直接将input上传放在了button内实现。
- 主要利用了input的type=“file” 实现上传框。
- 其中accept可以限制弹出框可选择的文件类型。可限制多种:
:accept="['doc', 'docx']"
- 示例代码
<b-buttonclass="btn btn-info"onclick="upload.click()"
><input type="file" name="upload" id="upload" ref="file"style="display: none;" @change="onFileSelected"accept=".png"/>
</b-button>
methods: {onFileSelected() {this.file = this.$refs.file.files[0]const formData = new FormData()formData.append('file', this.file)},
}
注:此处打印formData 显示为空,但实际可以传输,可以打印this.file查看。
- 也可使用以下代码(即b-form-file官方文件选择):
<template><div><b-form-file v-model="file" @change="onFileSelected"></b-form-file><b-button @click="uploadFile">上传</b-button></div>
</template>
<script>
import axios from 'axios'export default {data() {return {file: null}},methods: {onFileSelected(event) {this.file = event.target.files[0]},uploadFile() {if (!this.file) {return}let formData = new FormData()formData.append('file', this.file)axios.post('/api/upload', formData).then(response => {console.log(response.data)})}}
}
</script>
接口
- 常用有axios和http
- http: 使用http传输时,加上了Content-Type,但是一直有问题。后来发现代码中给http包装了下,强转了Content-Type的问题,实际直接使用xhr.send(data)即可
http.post('/upload', formData, {headers: {'Content-Type': 'multipart/form-data'}
})
后端
def upload(request):# 检查是否有文件被上传if 'file' not in request.files:return response.json({'error': 'No file uploaded'}, status=400)# 获取上传的文件对象file = request.files['file'][0]# 检查文件类型是否合法,这里以图片为例if not file.type.startswith('image/'):return response.json({'error': 'Invalid file type'}, status=400)# 定义存储目录和文件名upload_dir = '/path/to/upload/dir'filename = file.name# 创建存储目录(如果不存在)if not os.path.exists(upload_dir):os.makedirs(upload_dir)# 保存文件到指定路径with open(os.path.join(upload_dir, filename), 'wb') as f:f.write(file.body)
引用
vue文件上传功能bootstrap框架
XMLHttpRequest
文件选择(Form File Input)
Vue使用formData类型上传文件
相关文章:
bootstrapvue上传文件并存储到服务器指定路径及从服务器某路径下载文件
前记 第一次接触上传及下载文件,做个总结。 从浏览器上传本地文件 前端 本处直接将input上传放在了button内实现。主要利用了input的type“file” 实现上传框。其中accept可以限制弹出框可选择的文件类型。可限制多种: :accept"[doc, docx]&qu…...

Qt OpenGL(四十二)——Qt OpenGL 核心模式-GLSL(二)
提示:本系列文章的索引目录在下面文章的链接里(点击下面可以跳转查看): Qt OpenGL 核心模式版本文章目录 Qt OpenGL(四十二)——Qt OpenGL 核心模式-GLSL(二) 冯一川注:GLSL其实也是不断迭代的,比如像3.3版本中,基本数据类型浮点型只支持float型,而GLSL4.0版本开始就…...
C++基础讲解第八期(智能指针、函数模板、类模板)
C基础讲解第八期 代码中也有对应知识注释,别忘看,一起学习! 一、智能指针二、模板1. 概念2.函数模板1. 函数模板和普通函数 3. 类模板1.类模板的定义2.举个例子3.举例 一、智能指针 举个栗子: 看下面代码, 当我们直接new一个指针时, 忘记dele…...

JMeter 测试 ActiveMq
JMeter 测试 ActiveMq 的资料非常少, 我花了大量的时间才研究出来 关于ActiveMq 的文章请参考我另外的文章。 版本号: ActiveMq 版本号: 5.91 Jmeter 版本号: 1.13 添加ActiveMq 的jar包 将 ActiveMq 下的 "activemq-all-5.9.1.jar" 复制…...

2023年4月和5月随笔
1. 回头看 为了不耽误学系列更新,4月随笔合并到5月。 日更坚持了151天,精读完《SQL进阶教程》,学系统集成项目管理工程师(中项)系列更新完成。 4月和5月两月码字114991字,日均码字数1885字,累…...

新Linux服务器安装Java环境[JDK、Tomcat、MySQL、Nacos、Redis、Nginx]
文章目录 JDK服务Tomcat服务MySQL服务Nacos服务Redis服务Nginx服务 说明:本文不使用宝塔安装 温馨提示宝塔安装命令:yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh JDK服务…...

精简总结:一文说明软件测试基础概念
基础概念-1 基础概念-2 目录 一、什么是软件测试? 二、软件测试的特点 三、软件测试和开发的区别 1、内容: 2、技能区别 3、工作环境 4、薪水 5、发展前景 6、繁忙程度 7、技能要求 四、软件测试与调试的区别 1、角色 2、目的 3、执行的阶…...

通过 Gorilla 入门机器学习
机器学习是一种人工智能领域的技术和方法,旨在让计算机系统能够从数据中学习和改进,而无需显式地进行编程。它涉及构建和训练模型,使其能够自动从数据中提取规律、进行预测或做出决策。 我对于机器学习这方面的了解可以说是一片空白…...
【二叉树】298. 二叉树最长连续序列
文章目录 一、题目1、题目描述2、基础框架3、原题链接 二、解题报告1、思路分析2、时间复杂度3、代码详解 三、本题小知识 一、题目 1、题目描述 给你一棵指定的二叉树的根节点 root ,请你计算其中 最长连续序列路径 的长度。 最长连续序列路径 是依次递增 1 的路…...

Matlab论文插图绘制模板第100期—紧凑排列多子图(Tiledlayout)
不知不觉,《Matlab论文插图绘制模板》系列来到了第100期。 在此之前,其实我也没想到会有这么多种数据可视化表达方式,论文里不是折线图就是柱状图,单调的很。 假如研究生那会要是能遇到现在的自己(分享的内容&#x…...

[2.0快速体验]Apache Doris 2.0 日志分析快速体验
1. 概述 应用程序、服务器、云基础设施、IoT 和移动设备、DevOps、微服务架构—最重要的业务和 IT 发展趋势帮助我们以前所未有的方式优化运维和客户体验。但这些趋势也导致由机器生成的数据出现爆炸式成长,其中包括日志和指标等,例如,用户交…...

MySQL学习-数据库创建-数据库增删改查语句-事务-索引
MySQL学习 前言 SQL是结构化查询语言的缩写,用于管理关系数据库(RDBMS)中的数据。SQL语言由IBM公司的Donald Chamberlin和Raymond Boyce于20世纪70年代开发而来,是关系型数据库最常用的管理语言。 使用SQL语言可以实现关系型数据库中的数据处理、数据…...
浏览器渗透攻击-渗透测试模拟环境(9)
介绍了浏览器供给面和堆喷射技术。 “客户端最流行的应用软件是什么,大家知道吗?” 这个简单的问题,你当然不会放过:“当然是浏览器,国内用得最多的估计还是 IE 浏览器,其实 360安全浏览器遨游啥的也都是基于IE内核的。” “OK,浏览器是客户端渗透攻击的首要目标,目前IE…...

MySQL数据库基础(基础命令详解)
1、数据库操作 1.1、显示当前的数据库 SHOW DATABASES; 1.2、创建数据库 CREATE DATABASE IF NOT EXISTS 库名; 1.3、使用数据库 USE 库名; 1.4、删除数据库 DROP DATABASE IF EXISTS 库名; 说明:数据库删除之后,内部看不到对应…...

企业培训直播场景下嘉宾连线到底是如何实现的?
企业培训直播场景下,进行音视频连线的嘉宾,都拥有面向学员教学的权限,支持多位老师/专家异地同堂授课,那么,这种嘉宾连线到底是如何实现的? 企业培训,如何做到不受时间和地点限制,实…...

五、JSP05 分页查询及文件上传
五、JSP 分页查询及文件上传 5.1 使用分页显示数据 通过网络搜索数据时最常用的操作,但当数据量很大时,页面就会变得冗长,用户必须拖动才能浏览更多的数据 分页是把数据库中需要展示的数据逐页分步展示给用户 以分页的形式显示数据ÿ…...

一起看 I/O | 借助 Google Play 管理中心价格实验,优化定价策略
作者 / Google Play 产品经理 Phalene Gowling 今年 Google I/O 大会上的 "通过 Google Play Commerce 提升收益" 演讲重点为您介绍了深度集成至 Google Play 的最新创收工具。此工具专注于帮您优化定价策略。为您的产品或内容确定合适的价格是实现更出色的用户生命周…...
hexview 命令行操作使用说明
hexview 命令行操作使用说明 命令行操作基础格式 hexview.exe infile [option] -o outfile提取部分内容 hexview.exe app.hex /AR:0X200000-0X303404 /s /XI -o app1.hex/AR:指定提取的范围。(也可以使用/CR,它可以指定多个范围࿰…...

vue3+element plus,使用分页total修改成中文
vue3element plus,使用分页total修改成中文 使用element plus的分页功能 el-pagination 的时候,total属性显示是英文 这是我建的一个新项目,总数显示的Total 1000 我们的需求是显示中文,共 1000 条 这个就很尴尬,组件…...

RPC、HTTP、DSF、Dubbo,每个都眼熟,就是不知道有什么联系?
一、HTTP 和 RPC 首先,http 与 rpc 有什么区别这个问题不太严谨,因为这俩就不是一个层级的东西。 HTTP 这个大家太熟悉了吧?日常接触最多的恐怕就是各种http协议的接口了。 没错,http它是一个协议。 其他在这里就不打算铺开了…...
Java 8 Stream API 入门到实践详解
一、告别 for 循环! 传统痛点: Java 8 之前,集合操作离不开冗长的 for 循环和匿名类。例如,过滤列表中的偶数: List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:
在 HarmonyOS 应用开发中,手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力,既支持点击、长按、拖拽等基础单一手势的精细控制,也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档,…...
蓝桥杯 2024 15届国赛 A组 儿童节快乐
P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡,轻快的音乐在耳边持续回荡,小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下,六一来了。 今天是六一儿童节,小蓝老师为了让大家在节…...

C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...
MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例,Webpack.config.js它可能的配置和含义如下: 前言 Module Federation 的Webpack.config.js核心配置包括: name filename(定义应用标识) remotes(引用远程模块࿰…...
Java中栈的多种实现类详解
Java中栈的多种实现类详解:Stack、LinkedList与ArrayDeque全方位对比 前言一、Stack类——Java最早的栈实现1.1 Stack类简介1.2 常用方法1.3 优缺点分析 二、LinkedList类——灵活的双端链表2.1 LinkedList类简介2.2 常用方法2.3 优缺点分析 三、ArrayDeque类——高…...
当下AI智能硬件方案浅谈
背景: 现在大模型出来以后,打破了常规的机械式的对话,人机对话变得更聪明一点。 对话用到的技术主要是实时音视频,简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术,开发自己的大模型。商用方案多见为字节、百…...