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…...
Android Wi-Fi 连接失败日志分析
1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分: 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析: CTR…...
大话软工笔记—需求分析概述
需求分析,就是要对需求调研收集到的资料信息逐个地进行拆分、研究,从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要,后续设计的依据主要来自于需求分析的成果,包括: 项目的目的…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
【HTTP三个基础问题】
面试官您好!HTTP是超文本传输协议,是互联网上客户端和服务器之间传输超文本数据(比如文字、图片、音频、视频等)的核心协议,当前互联网应用最广泛的版本是HTTP1.1,它基于经典的C/S模型,也就是客…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解,涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容,并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念(ACID) 事务是…...
破解路内监管盲区:免布线低位视频桩重塑停车管理新标准
城市路内停车管理常因行道树遮挡、高位设备盲区等问题,导致车牌识别率低、逃费率高,传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法,正成为破局关键。该设备安装于车位侧方0.5-0.7米高度,直接规避树枝遮…...
