Vue的APP实现下载文件功能,并将文件保存到手机中
Vue的APP实现下载文件功能,并将文件保存到手机中
- 文字说明
- 后台核心代码
- 前台核心代码
- 运行截图
- 项目链接
文字说明
本文介绍Vue实现的APP,将文件下载并保存到手机中,为系统提供导出功能;同时支持导入,即选择本地的文件后,获取文件内容,并将其上传到服务器中,也可选择对上传的文件内容进行解析,为系统提供导入功能
附带讲解视频,主要实验Vue的5+App的文件上传和下载功能
后台核心代码
后端控制器代码(上传接口)
package com.boot.controller;import com.boot.entity.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;import java.io.InputStream;/*** @author bbyh* @date 2024/6/4 22:58*/
@RestController
@Slf4j
@CrossOrigin(origins = "*", maxAge = 3600)
public class UploadController {@PostMapping("/upload")public Result upload(@RequestBody MultipartFile file) {try {InputStream inputStream = file.getInputStream();byte[] buf = new byte[inputStream.available()];int read = inputStream.read(buf);String fileContent = new String(buf, 0, read);log.info("文件名称:{},文件内容:{}", file.getOriginalFilename(), fileContent);return Result.success("文件上传成功", fileContent);} catch (Exception e) {log.error(e.getMessage(), e);return Result.error("文件上传接口接口服务出错", null);}}
}
下载接口
package com.boot.controller;import com.boot.entity.Result;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletResponse;
import java.io.InputStream;
import java.net.URLEncoder;
import java.nio.file.Files;
import java.nio.file.Paths;/*** @author bbyh* @date 2024/6/4 22:45*/
@RestController
@Slf4j
@CrossOrigin(origins = "*", maxAge = 3600)
public class DownloadController {@Value("${file.path}")private String filePath;@GetMapping("/download/{fileName}")public void download(@PathVariable String fileName, HttpServletResponse response) {try {response.setContentType("application/octet-stream");response.addHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8"));try (InputStream inputStream = Files.newInputStream(Paths.get(filePath + fileName))) {byte[] buf = new byte[inputStream.available()];int read = inputStream.read(buf);response.getOutputStream().write(buf, 0, read);}} catch (Exception e) {log.error(e.getMessage(), e);response.reset();Result.writeResult(response, "文件下载接口接口服务出错," + e.getMessage());}}
}
前台核心代码
页面主要代码
<template><div style="display: flex; justify-content: center; align-items: center; height: 100px; width: 100%"><el-button type="primary" @click="selectFile()">选择文件上传</el-button><el-button type="danger" @click="openDownloadDialog()">下载文件</el-button><input type="file" style="display: none" @change="uploadFile($event)" ref="uploadFileRef"></div><el-dialog title="文件下载" width="60%" v-model="data.dialog"><el-input v-model="data.fileName" placeholder="请输入下载文件名"/><template #footer><span class="dialog-footer"><el-button @click="data.dialog = false">取消</el-button><el-button type="primary" @click="downloadFile">确认下载</el-button></span></template></el-dialog>
</template><script setup>
import {downloadFileToLocal, message, postRequest} from "./util";
import {reactive, ref} from "vue";function uploadFile(event) {if (event.target.files.length === 0) {message("warning", "本次未选择文件");return;}const formData = new FormData();const file = event.target.files[0];formData.append("file", file, file.name);postRequest("/upload", formData).then((res) => {if (res.data.code === 200) {message("success", res.data.data);} else if (res.data.code === 500) {message("error", res.data.msg);}});
}const uploadFileRef = ref();async function selectFile() {uploadFileRef.value.click();
}const data = reactive({fileName: undefined,dialog: false,
});function openDownloadDialog() {data.fileName = undefined;data.dialog = true;
}function downloadFile() {downloadFileToLocal("/download/" + data.fileName, data.fileName);
}
</script><style>
* {padding: 0;margin: 0;box-sizing: border-box;
}
</style>
工具类代码
import axios from "axios";
import {ElMessage} from "element-plus";const baseUrl = "http://127.0.0.1:5000";export const downloadFileToLocal = (href, filename) => {const eleLink = document.createElement('a');eleLink.download = filename;eleLink.style.display = 'none';eleLink.href = baseUrl + href;document.body.appendChild(eleLink);eleLink.click();document.body.removeChild(eleLink);
}export function message(type, msg) {ElMessage({message: msg,type: type,center: true,showClose: true,})
}export const postRequest = (url, data) => {return axios({method: 'post',url: baseUrl + url,data: data,})
}
运行截图
页面运行效果
项目链接
VueApp上传下载文件
相关文章:
Vue的APP实现下载文件功能,并将文件保存到手机中
Vue的APP实现下载文件功能,并将文件保存到手机中 文字说明后台核心代码前台核心代码运行截图项目链接 文字说明 本文介绍Vue实现的APP,将文件下载并保存到手机中,为系统提供导出功能;同时支持导入,即选择本地的文件后&…...
泛微开发修炼之旅--07通过后端代码实现创建并发送待办、源码及示例
文章链接:泛微开发修炼之旅--07通过后端代码实现创建并发送待办、源码及示例...
轻松搭建AI应用的三个大模型技术路线
时下聊起AI,想必最热的就是使用AI的应用(chatGPT,文心一言等)来提升自己工作的效率,比如破局俱乐部,洋哥带领星球2万多人开启大航海,教人使用这一波新起的应用进行赚钱与赋能。 在我的视角来看…...
Vue01-vue的简介
一、Vue是什么? 一套用于构建用户界面的渐进式javaScript框架。 构建用户界面: 渐进式: 目前Vue的地位:生态完善,国内前端工程师必备技能。 二、Vue的特点 一个XXX.vue就是一个组件,封装的概念,…...
leetcode455.分发饼干、376. 摆动序列、53. 最大子序和
455.分发饼干 为了满足更多的小孩,就不要造成饼干尺寸的浪费 大尺寸的饼干既可以满足胃口大的孩子也可以满足胃口小的孩子,那么就应该优先满足胃口大的 这里的局部最优就是大饼干喂给胃口大的,充分利用饼干尺寸喂饱一个,全局最…...
JVM的内存结构
JVM 内存结构 方法区: 方法区主要用于存储虚拟机加载的类信息、常量、静态变量,以及编译器编译后的代码等数据。 程序计数器 由于在JVM中,多线程是通过线程轮流切换来获得CPU执行时间的,因此,在任一具体时刻,一个CP…...
轻量管理内核复杂级别的项目
在嵌入式开发中,管理大型项目(例如Linux内核)往往是一个复杂的过程。常规的版本控制系统如Git在处理小型项目时非常高效,但面对庞大的代码库时可能会显得笨重且占用大量存储空间。本文将介绍几种轻量级的方法来管理内核级别的项目…...
【wiki知识库】05.分类管理模块--后端SpringBoot模块
📝个人主页:哈__ 期待您的关注 目录 一、🔥今日目标 二、☀SpringBoot代码修改 1.使用逆向工程生成Category表结构 2. 新增CategoryQueryParam 3.新增CategorySaveParam 4.新增CategotyQueryVo 三、🤖新增分类管理的相关接口…...
资源目录与云SSO
1、开启资源目录 2、创建资源文件夹(根据公司业务划分) 3、资源文件夹内创建或邀请成员 4、创建管控策略(类型访问控制权限授权方法,可以授权给指定给资源文件夹或资源文件夹内成员) 5、可信服务-委派管理员账号数量 …...
ChatGPT AI专题资料合集【65GB】
介绍 ChatGPT & AI专题资料合集【65GB】 🎁【七七云享】资源仓库,海量资源,无偿分享√...
Linux 编译安装python
以deepin操作系统安装Python3.8.10为例。 下载 python3.8.10 官网下载 Linux要下载源码,进行编译。 下图tarball即tar包,是压缩包的意思。python官网给出两种压缩格式的tarball,下载哪个都可以。 方式一:直接点击链接下载 方式…...
2025 QS 世界大学排名公布,北大清华跻身全球前20
一年一度,2025 QS 世界大学排名公布! QS(Quacquarelli Symonds)是唯一一个同时将就业能力与可持续发展纳入评价体系的排名。 继去年 2024 QS 排名因为“墨尔本超耶鲁,新南悉尼高清华”而荣登微博热搜之后,…...
clickhouse(十五、存储优化实践)
文章目录 背景问题定位优化方式排序键设计写入顺序压缩算法 DoubleDeltaLowCardinality避免使用Nullable 总结 背景 clickhouse集群容量告警,项目中某些表占据大量的存储空间,借此机会对ck的存储优化进行实践学习,并通过多种方式测试验证优化…...
ubuntu下搭建Supervisor
sudo apt update #安装 sudo apt install supervisor#启动 supervisord 服务: sudo systemctl start supervisor#关闭 supervisord 服务 sudo systemctl stop supervisor#重启 supervisord 服务 sudo systemctl restart supervisor#设置 supervisord 开机自启 sudo …...
在HTML和CSS当中运用显示隐藏
1.显示与隐藏 盒子显示:display:block;盒子隐藏: display:none:隐藏该元素并且该元素所占的空间也不存在了。 visibility:hidden:隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。 2.圆角边框 在CSS2中添加圆角,我们不得不使用背景图像&am…...
Java基础27,28(多线程,ThreadMethod ,线程安全问题,线程状态,线程池)
目录 一、多线程 1. 概述 2. 进程与线程 2.1 程序 2.2 进程 2.3 线程 2.4 进程与线程的区别 3. 线程基本概念 4.并发与并行 5. 线程的创建方式 方式一:继承Thread类 方式二:实现Runable接口 方式三:实现Callable接口 方式四&…...
C#WPF数字大屏项目实战04--设备运行状态
1、引入Livecharts包 项目中,设备运行状态是用饼状图展示的,因此需要使用livechart控件,该控件提供丰富多彩的图形控件显示效果 窗体使用控件 2、设置饼状图的显示图例 通过<lvc:PieChart.Series>设置环状区域 3、设置饼状图资源样…...
IntelliJ IDEA安装
IntelliJ IDEA 的安装、配置与使用-简化版 一、IntelliJ IDEA 介绍 1.JetBrains 公司介绍 IDEA(https://www.jetbrains.com/idea/)是 JetBrains 公司的产品,公司旗下还有其 它产品,比如: ➢ WebStorm:用于开发 JavaScript、HT…...
铸铁机械5G智能工厂工业物联数字孪生平台,推进制造业数字化转型
铸铁机械5G智能工厂工业物联数字孪生平台,推进制造业数字化转型。工业物联数字孪生平台以5G技术为基础,通过工业物联网连接铸铁机械生产过程中的各个环节,运用数字孪生技术构建虚拟工厂,实现生产过程的实时监测、模拟与优化&#…...
rocketmq No route info of this topic 问题排查
Broker配置项 autoCreateTopicEnable true 如果是单节点(master),注释掉这里的配置 #有三个值:SYNC_MASTER,ASYNC_MASTER,SLAVE;同步和异步表示Master和Slave之间同步数据的机制; #brokerRole SYNC_MASTER Pytho…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
go 里面的指针
指针 在 Go 中,指针(pointer)是一个变量的内存地址,就像 C 语言那样: a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10,通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础
第三周 Day 3 🎯 今日目标 理解类(class)和对象(object)的关系学会定义类的属性、方法和构造函数(init)掌握对象的创建与使用初识封装、继承和多态的基本概念(预告) &a…...
