基于若依的文件上传、下载

基于若依实现文件上传、下载

文章目录

  • 基于若依实现文件上传、下载
    • 1、前端实现-文件上传
      • 1.1 通用上传分析
      • 1.2 修改实现上传接口
    • 2、后端实现-文件上传
    • 3、后端实现-文件下载
    • 4、前端实现-文件下载

官网其实也写了,但是我是自己改造封装了一下,再次迈向全栈的一小步。下面是官网前后端分离版本文件上传的地址:

若依官方文档

1、前端实现-文件上传

1.1 通用上传分析

首先我这里有一个书籍列表的基础页面,我在它的修改这一栏加上了文件上传,这里前端其实就是用了若依封装的一个全局文件上传的组件,如果想看它的底层逻辑可以直接main.js,我这里就直接用了(但是后来发现全局组件不能行,还得自己封装elemntui的组件upload,这里只是先分析逻辑)

注意这里只是先分析,实现还在后面,因为若依自带的通用文件上传我们不能调用自己的上传接口,保存文件信息到数据库
在这里插入图片描述
这里就是找到对应的修改的dialog对话框中的form加上全局组件 <file-upload v-model="form.file"/>就可以了

    <!-- 添加或修改对话框 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><!--这里其他不重要的字段只列举了一部分--><el-form-item label="图书类型" prop="bookType"><el-select v-model="form.bookType" placeholder="请选择图书类型"><el-option label="名著" value="1"></el-option><el-option label="历史" value="2"></el-option><el-option label="社科" value="3"></el-option></el-select></el-form-item><el-form-item label="出版日期" prop="publishDate"><el-date-picker clearablev-model="form.publishDate"type="date"value-format="yyyy-MM-dd"placeholder="请选择出版日期"></el-date-picker></el-form-item><!--文件上传字段--><el-form-item label="上传文件" prop="file"><file-upload v-model="form.file"/></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>

然后我们在修改对话框中点击上传文件,就会发现它直接调用了后端通用的上传文件的接口,已经把文件上传到了服务器,并且返回了上传后的地址
在这里插入图片描述

  /*** 通用上传请求(单个)*/@PostMapping("/upload")public AjaxResult uploadFile(MultipartFile file) throws Exception{try{// 上传文件路径 ,已在配置文件配置D:/ruoyi/uploadPathString filePath = RuoYiConfig.getUploadPath();// 上传并返回新文件名称 这里其实就在电脑配置的地址 根据年月日可以看文件了String fileName = FileUploadUtils.upload(filePath, file);String url = serverConfig.getUrl() + fileName;AjaxResult ajax = AjaxResult.success();ajax.put("url", url);ajax.put("fileName", fileName);ajax.put("newFileName", FileUtils.getName(fileName));ajax.put("originalFilename", file.getOriginalFilename());return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}

在这里插入图片描述

上面就是FileUploadUtils.upload(filePath, file);上传后的文件,下面是通用上传接口返回的响应,自己可以先看清楚,对于这个新的文件名称fileName 其实就是去掉了前缀的配置地址然后加上了一个profile,这个是为了隐藏我们真实的配置的文件路径,把配置的地址映射为了profile

但是这里其实可能不是我们想要的,**因为我们想调用我们自己的上传接口,这样我们后端还可以对文件进行处理,比如拿到文件后缀,把文件存入数据库对应的字段等。

1.2 修改实现上传接口

所以我们只能自己基于elemntui 去做修改,这里我想上传成功后还要返显文件名称

在列表的form加一个文件名称字段,

 <el-table-column label="文件名称" align="center" prop="fileName" />

首先对新增和修改的dialog做修改

 <!-- 添加或修改对话框 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><!--其他字段就省略了--><!--文件上传字段--><el-form-item label="上传文件" ><!--这里上传成功后会绑定文件名到form.fileName字段传给后端的新增接口,uploadBookFile定义上传请求, :before-upload是上传前的回调,用于文件格式校验 --><el-uploadclass="upload-demo"action="#":http-request="uploadBookFile":drag="true":before-upload="uploadFileFun":headers="upload.headers":file-list="form.fileList"><div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div><div class="el-upload__tip fontSize12 colorRed" slot="tip">上传文件格式为word或pdf或者txt,文件大小在2M以内</div></el-upload></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>

data 数据

      upload: {// 设置上传的请求头部headers: { Authorization: "Bearer " + getToken() },},// 表单参数form: {},

javaScript方法

import { uploadBookFile} from "@/api/system/book";//下面是method写在里面的,  这里就是上传功能向后端发送上传请求,参数是一个二进制文件uploadBookFile(file){console.log(file.file,151454)// 创建formdata实例let formData = new window.FormData();// 将获取的文件通过append方法加入实例中formData.append("file", file.file);//发送axios请求uploadBookFile(formData).then(res => {console.log(res)//拿到后端响应的文件名称反显到列表的formthis.form.fileName = res.originalFilename})},//文件上传前的校验uploadFileFun(file){var test = /(doc|docx|pdf|txt)$/.test(file.name.split('.').pop().toLowerCase());if (!test) {this.$message.error("请上传正确的文档格式!");return false;}const isLt2M = file.size / 1024 / 1024 < 2;if (!isLt2M) {this.$message.error("上传文件大小不能超过 2MB!");return false;}},/** 提交按钮 */submitForm() {this.$refs["form"].validate(valid => {if (valid) {if (this.form.id != null) {updateBook(this.form).then(response => {this.$modal.msgSuccess("修改成功");this.open = false;this.getList();});} else {addBook(this.form).then(response => {this.$modal.msgSuccess("新增成功");this.open = false;this.getList();});}}});},

api/book.js

import { getToken } from "@/utils/auth";
// 上传文件
export function uploadBookFile(data) {return request({url: '/system/book/uploadFile',method: 'post',data: data,headers: {'Content-Type': 'multipart/form-data','Authorization': "Bearer " + getToken(),}})
}

2、后端实现-文件上传

后端其实就比较简单了,我也没做一个专门的文件表,只是在业务表里面加了一个file_name字段,表结构如下**(这里只是做文件上传,所以不需要文件路径字段,后续做文件下载就必须要文件路径字段,后面我会再修改)**

在这里插入图片描述

controller 这里是前端的upload组件传过来了一个二进制文件,然后后端把文件上传到服务器,并把文件名也返回给了前端,这样前端就可以对响应结果做解析,把文件名字段绑定到新增、修改的dialog里面,然后点击保存再把文件名称字段传回后端保存到数据库。

/*** 上传文件接口* @param file* @return* @throws Exception*/@PostMapping("/uploadFile")public AjaxResult uploadFile(MultipartFile file) throws Exception{try{// 上传文件路径 ,已在配置文件配置D:/ruoyi/uploadPathString filePath = RuoYiConfig.getUploadPath();// 上传并返回新文件名称 . "fileName": "/profile/upload/2024/07/06/紫金项目_20240706155317A001.txt",String fileName = FileUploadUtils.upload(filePath, file);String url = serverConfig.getUrl() + fileName;//这些信息返回给前端之后,AjaxResult ajax = AjaxResult.success();ajax.put("url", url);ajax.put("fileName", fileName);//    "newFileName": "紫金项目_20240706155317A001.txt",ajax.put("newFileName", FileUtils.getName(fileName));// "originalFilename": "紫金项目.txt",用于给前端列表回显ajax.put("originalFilename", file.getOriginalFilename());return ajax;}catch (Exception e){return AjaxResult.error(e.getMessage());}}/*** 新增接口就是代码生成的看的,前端点击保存按钮的时候会读取Book实体类的fileName字段再保存到数据库*/@PreAuthorize("@ss.hasPermi('system:book:add')")@Log(title = "新增", businessType = BusinessType.INSERT)@PostMappingpublic AjaxResult add(@RequestBody Book book){return toAjax(bookService.insertBook(book));}

3、后端实现-文件下载

由于实现文件下载,所以必不可少的就是文件路径这个字段,所以我们还得加上文件路径这个字段,所以现在表结构如下,还得给所有的增删改查字段加上文件路径这个字段

在这里插入图片描述

其他的直接使用通用的文件下载接口就可以了 ,前端传一个文件路径回来,后端就可以直接下载了

前端需要传的文件路径是这样的 /profile/upload/2024/07/06/紫金项目_20240706160309A002.txt

首先前端经过代理proxy之后就会拿到ip和端口,然后后端这时候有个拦截器,它会拦截/profile,拦截之后把它再替换成配置文件中配置的绝对路径。

在这里插入图片描述

4、前端实现-文件下载

首先修改文件上传方法,加入一行 this.form.filePath = res.fileName,这样上传后,把文件路径绑定到了西新增修改的dialong,在点击保存的时候,就可以把文件路径存入数据库。后续列表查询就可以读取到当前行的文件路径了。

    uploadBookFile(file){console.log(file.file,151454)// 创建formdata实例let formData = new window.FormData();// 将获取的文件通过append方法加入实例中formData.append("file", file.file);uploadBookFile(formData).then(res => {console.log(res)// 保存到新增、修改的form里面再入数据库this.form.fileName = res.originalFilenamethis.form.filePath = res.fileName})},

加上下载按钮

 <el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template slot-scope="scope"><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleUpdate(scope.row)"v-hasPermi="['system:book:edit']">修改</el-button><el-buttonsize="mini"type="text"icon="el-icon-delete"@click="handleDelete(scope.row)"v-hasPermi="['system:book:remove']">删除</el-button><el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handleDownload(scope.row)">下载</el-button></template></el-table-column>

在method里面加上如下方法,这里就是直接调用了通用的文件下载,这里的filePanth就是前面保存的/profile/upload/2024/07/06/紫金项目_20240706160309A002.txt

    handleDownload(row){var name = row.fileName;var url = row.filePath;this.$download.resource(url,false)}

最后值得注意的是我目前实现的都是单文件上传和下载,多文件我后续会继续写demo

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/370870.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3.js - 模板渲染 - 简单

3.js 真tm枯燥啊&#xff0c;狗都不学 效果图 源码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/li…

elementui中日期/时间的禁用处理,使用传值的方式

项目中,经常会用到 在一个学年或者一个学期或者某一个时间段需要做的某件事情,则我们需要在创建这个事件的时候,需要设置一定的时间周期,那这个时间周期就需要给一定的限制处理,避免用户的误操作,优化用户体验 如下:需求为,在选择学年后,学期的设置需要在学年中,且结束时间大…

使用京东云主机搭建幻兽帕鲁游戏联机服务器全流程,0基础教程

使用京东云服务器搭建幻兽帕鲁Palworld游戏联机服务器教程&#xff0c;非常简单&#xff0c;京东云推出幻兽帕鲁镜像系统&#xff0c;镜像直接选择幻兽帕鲁镜像即可一键自动部署&#xff0c;不需要手动操作&#xff0c;真正的新手0基础部署幻兽帕鲁&#xff0c;阿腾云整理基于京…

【LabVIEW学习篇 - 2】:LabVIEW的编程特点

文章目录 LabVIEW的编程特点图形编程天然并行运行基于数据流运行 LabVIEW的编程特点 图形编程 LabVIEW使用图形化的图形化编程语言&#xff08;G语言&#xff09;&#xff0c;用户通过在程序框图中拖放和连接各种节点&#xff08;Nodes&#xff09;来编写程序。每个节点代表一…

图像增强 目标检测 仿射变换 图像处理 扭曲图像

1.背景 在目标检测中&#xff0c;需要进行图像增强。这里的代码模拟了旋转、扭曲图像的功能&#xff0c;并且在扭曲的时候&#xff0c;能够同时把标注的结果也进行扭曲。 这里忽略了读取xml的过程&#xff0c;假设图像IMG存在对应的标注框&#xff0c;且坐标为左上、右下两个…

vue学习笔记(购物车小案例)

用一个简单的购物车demo来回顾一下其中需要注意的细节。 先看一下最终效果 功能&#xff1a; &#xff08;1&#xff09;全选按钮和下面的商品项的选中状态同步&#xff0c;当下面的商品全部选中时&#xff0c;全选勾选&#xff0c;反之&#xff0c;则不勾选。 &#xff08…

SpringBoot新手快速入门系列教程四:创建第一个SringBoot的API

首先我们用IDEA新建一个项目&#xff0c;请将这些关键位置按照我的设置设置一下 接下来我将要带着你一步一步创建一个Get请求和Post请求&#xff0c;通过客户端请求的参数&#xff0c;以json格式返回该参数{“message”:"Hello"} 1,先在IDE左上角把这里改为文件模式…

华为云OBS 通过S3客户端访问

华为云好像没有对S3协议的支持说明其实底层是支持S3协议的。 使用S3的时候我们会需要endpoint&#xff0c;桶名字&#xff0c;region&#xff0c;AWS_ACCESS_KEY,AWS_SECRET_KEY 其中endpoint 就是图片中的&#xff0c;桶名字也很容易找到&#xff0c;region 就是你的endpoint…

【开源项目】LocalSend 局域网文件传输工具

【开源项目】LocalSend 局域网文件传输工具 一个免费、开源、跨平台的局域网传输工具 LocalSend 简介 LocalSend 是一个免费的开源跨平台的应用程序&#xff0c;允许用户在不需要互联网连接的情况下&#xff0c;通过本地网络安全地与附近设备共享文件和消息。 项目地址&…

liunx文件系统,日志分析

文章目录 1.inode与block1.1 inode与block概述1.2 inode的内容1.3 文件存储1.4 inode的大小1.5 inode的特殊作用 2.硬链接与软链接2.1链接文件分类 3.恢复误删除的文件3.1 案例:恢复EXT类型的文件3.2 案例:恢复XFS类型的文件3.2.1 xfsdump使用限制 4.分析日志文件4.1日志文件4.…

docker部署redis/mongodb/

一、redis 创建/root/redis/conf/redis.conf 全部执行命令如下 docker run -it -d --name redis -p 6379:6379 --net mynet --ip 172.18.0.9 -m 400m -v /root/redis/conf:/usr/local/etc/redis -e TXAsia/Shangehai redis redis-server /usr/local/etc/redis/redis.conf 部署…

Java 基础--File - IO流(2)

I/O流 定义 数据从硬盘流向内存为输入流&#xff0c;数据从内存流向硬盘为输出流。输入也叫读取数据&#xff0c;输出也叫写出数据。 IO分类 1.按照数据的流向分为&#xff1a;输入流和输出流 ①输入流&#xff1a;把数据从其他设备上读取到内存中的流 ②输出流&#xff1…

python小练习04

三国演义词频统计与词云图绘制 import jieba import wordcloud def analysis():txt open("三国演义.txt",r,encodingutf-8).read()words jieba.lcut(txt)#精确模式counts {}for word in words:if len(word) 1:continueelif word "诸葛亮" or word &q…

软件系统架构的一些常见专业术语

分层架构是逻辑上的&#xff0c;在物理部署上&#xff0c;三层结构可以部署在同一个物理机器上&#xff0c;但是随着网站业务的发展&#xff0c;必然需要对已经分层的模块分离部署&#xff0c;即三层结构分别部署在不同的服务器上&#xff0c;使网站拥有更多的计算资源以应对越…

前端Web开发HTML5+CSS3+移动web视频教程 Day4 CSS 第2天

P44 - P 四个知识点&#xff1a; 复合选择器 CSS特性 背景属性 显示模式 复合选择器 复合选择器仍然是选择器&#xff0c;只要是选择器&#xff0c;作用就是找标签。复合选择器就是把基础选择器进行组合使用。组合了之后就可以在大量的标签里面更快更精准地找标签了。找…

[附源码]基于Flask的演唱会购票系统

摘要 随着互联网技术的普及和发展&#xff0c;传统购票方式因其效率低下、流程繁琐等问题已难以满足现代社会的需求。本文设计并实现了一个基于Flask框架的演唱会购票系统&#xff0c;该系统集成了用户管理、演唱会信息管理、票务管理以及数据统计与分析等功能模块&#xff0c…

项目实战--Spring Boot + Minio文件切片上传下载

1.搭建环境 引入项目依赖 <!-- 操作minio的java客户端--> <dependency><groupId>io.minio</groupId><artifactId>minio</artifactId><version>8.5.2</version> </dependency> <!-- jwt鉴权相应依赖--> &…

Python + OpenCV 开启图片、写入储存图片

这篇教学会介绍OpenCV 里imread()、imshow()、waitKey() 方法&#xff0c;透过这些方法&#xff0c;在电脑中使用不同的色彩模式开启图片并显示图片。 imread() 开启图片 使用imread() 方法&#xff0c;可以开启图片&#xff0c;imread() 有两个参数&#xff0c;第一个参数为档…

[c++] 可变参数模版

前言 可变参数模板是C11及之后才开始使用,学校的老古董编译器不一定能用 相信大家在刚入门c/c时都接触过printf函数 int printf ( const char * format, ... ); printf用于将数据格式化输出到屏幕上,它的参数非常有意思,可以支持任意数量,任意类型的多参数.而如果我们想实现类…

陶建辉当选 GDOS 全球数据库及开源峰会荣誉顾问

近日&#xff0c;第二十三届 GOPS 全球运维大会暨 XOps 技术创新峰会在北京正式召开。本次会议重点议题方向包括开源数据库落地思考、金融数据库自主可控、云原生时代下数据库、数据库智能运维、数据库安全与隐私、开源数据库与治理。大会深入探讨这些方向&#xff0c;促进了数…