SSM框架实现附带信息的文件上传&下载
SSM框架实现附带信息的文件上传&下载
目录
技术概述
在进行团队开发时,分配到了资源和作业部分的后端相关内容,需要实现文件的上传和下载。但是由于各个文件保存路径不相同,以及存在需要附带信息保存的情况,如提交作业时同时有附件、正文内容以及附带学生id与班级id,教师上传资源时要传递班级id与教师id等。在同时上传文件和传递信息时,本来使用form表单传递即可,但是前端用了vue框架,加上除了表单中填写的信息还要附带其他信息,最后找到了form-data传递的办法。
技术详述
- 我们使用一个类封装了需要的信息和文件
public class ResourceDTO {
private int id;
private String resourceName;
private int type;
private int downloads;
private String filePath;
private int teacherId;
private int clazzId;
private MultipartFile file;
......
其他字段用于保存信息,file用来存文件。
- 准备好依赖
pom.xml
<!-- 文件上传 -->
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3</version>
</dependency>
springmvc.xml中
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="#{1024*1024*20}"/>
<property name="defaultEncoding" value="utf-8"/>
</bean>
- 在Controller中,接受前端数据并存储
@RequestMapping("upload")
@ResponseBody
public ResponseVO upload(@ModelAttribute ResourceDTO requestResource, HttpServletRequest request) {
try {
MultipartFile file = requestResource.getFile();
String originalFileName = file.getOriginalFilename();
String fileUrl = "/WEB-INF/resource/" + requestResource.getTeacherId() +"/" + requestResource.getClazzId() + "/" + originalFileName;//这是路径,可以自定义
//获取路径
fileUrl = request.getSession().getServletContext().getRealPath(fileUrl);
//向url地址存储文件
FileUtil.writeFileToUrl(file, fileUrl);
//接下来就是将requestResource的数据存到数据库中,这里就不放了
......
}
catch(Exception e){
e.printStackTrace();
}
......
FileUtil的代码如下:
import org.springframework.web.multipart.MultipartFile;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.Date;
public class FileUtil {
public static void writeFileToUrl(MultipartFile file, String fileUrl) throws IOException {
File file1 = new File(fileUrl);
if (!file1.getParentFile().exists()) {
file1.getParentFile().mkdirs();
}
FileOutputStream fos = new FileOutputStream(file1);
fos.write(file.getBytes());
fos.flush();
fos.close();
}
}
- 可以写个表单测试一下
<form action = "upload" method="post" enctype="multipart/form-data">
<input type="file" name = "file">
<input type="submit" value="上传文件">
</form>
- 下载我采用了简单的数据流下载
@RequestMapping(value = "/resource/download")
public void download(HttpServletRequest request, HttpServletResponse response ,@RequestParam("id") int id){
try {
Resource requestResource = resourceService.findById(id);
String filePath = requestResource.getFilePath();
File file = new File(filePath);//如果文件存在的话
resourceService.modifyDownload(requestResource.getId());
if (file.exists()) {//获取输入流
InputStream bis = new BufferedInputStream(new FileInputStream(file));//假如以中文名下载的话
String filename = requestResource.getResourceName() ;
filename = URLEncoder.encode(filename, "UTF-8" );//设置文件下载头
response.addHeader("Content-Disposition", "attachment;filename=" + filename);
response.setContentType ( "multipart/form-data" );
BufferedOutputStream out = new BufferedOutputStream(response.getOutputStream());int len = 0;
while ((len = bis.read()) != -1) {
out.write(len);
}
out.close();
}
} catch (IOException ioException) {
ioException.printStackTrace();
}
}
技术使用中遇到的问题和解决过程
我们遇到的问题是:前端使用了vue框架,上传文件时我们不知道如何进行附带信息的传递。
解决:翻了很多博客,最后使用form-data来进行数据与文件的传递,与负责相关前端的组长同志交流测试后完成,确认可用。
ps:以下前端代码是由我们伟大的组长完成的
表单部分:
<div id="divForm">
<el-form :model="publishForm" ref="publishForm" label-position="top">
<el-form-item label="资源信息" class="label">
<i class="el-icon-star-on">选择分组</i>
<br>
<el-select v-model="typeValue" placeholder="课程资源">
<el-option
v-for="item in typeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="资源内容" class="label">
<i class="el-icon-star-on">上传文件</i>
<br/>
<input class="file" name="file" type="file" @change="select"/>
<p id="p">提示:单个文件不超过20MB</p>
</el-form-item>
<el-form-item>
<el-button id="cancel" type="primary" plain size="mini" @click="cancelClick">取消</el-button>
<el-popover
placement="top"
width="160"
v-model="visible">
<p>确定发布该资源吗?</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible = false">取消</el-button>
<el-button type="primary" size="mini" @click="publishClick">确定</el-button>
</div>
<el-button slot="reference" id="publish" class="button" type="primary" plain size="mini">发布</el-button>
</el-popover>
</el-form-item>
</el-form>
</div>
以下是数据处理
publishClick() {//确定上传
let param = new FormData() // 创建form对象
param.append('file', this.file, this.file.name) // 通过append向form对象添加数据
param.append('teacherId', this.tId)
param.append('clazzId',this.clazzValue)
param.append('type',this.typeValue)// 添加form表单中其他数据
// withCredentials: true 使得后台可以接收表单数据 跨域请求
const instance = this.$axios.create({
withCredentials: true,
headers:{
'Content-type': 'application/json;charset=UTF-8',
'Authorization': localStorage.getItem('token')
}
})
// url为后台接口
instance.post('http://1.15.149.222:8080/coursewebsite/teacher/resource/upload', param)
.then((response) => {
console.log(response.data)
if (response.data.code==='200') {
alert('上传成功')
this.$router.push('/teacher/source/study')
this.$router.go(0)
}
}) // 成功返回信息 调用函数 函数需自己定义,此处后面省略
.catch((error) => {
console.log(error) //请求失败返回的数据
})
}
总结
1.准备好依赖与封装好的类
2.写好Controller的处理
3.写好前端的处理
参考链接
SSM框架实现附带信息的文件上传&下载的更多相关文章
- springmvc文件上传下载简单实现案例(ssm框架使用)
springmvc文件上传下载实现起来非常简单,此springmvc上传下载案例适合已经搭建好的ssm框架(spring+springmvc+mybatis)使用,ssm框架项目的搭建我相信你们已经搭 ...
- ssm文件上传下载比较详细的案例
背景:ssm框架 接下来,我会介绍单文件上传,下载,多文件的上传,下载,使用ajax进行文件的上传下载,和普通的表单提交的文件上传下载. 只要做项目,总是少不了文件的操作,好了废话不多说,直接上代码! ...
- (SSM框架)实现小程序图片上传(配小程序源码)
阅读本文约"2分钟" 又是一个开源小组件啦! 因为刚好做到这个小功能,所以就整理了一下,针对微信小程序的图片(文件)上传! 原业务是针对用户反馈的图片上传.(没错,本次还提供小程序 ...
- 艺萌文件上传下载及自动更新系统(基于networkComms开源TCP通信框架)
1.艺萌文件上传下载及自动更新系统,基于Winform技术,采用CS架构,开发工具为vs2010,.net2.0版本(可以很容易升级为3.5和4.0版本)开发语言c#. 本系统主要帮助客户学习基于TC ...
- ssh框架文件上传下载
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- SpringMVC文件上传下载(单文件、多文件)
前言 大家好,我是bigsai,今天我们学习Springmvc的文件上传下载. 文件上传和下载是互联网web应用非常重要的组成部分,它是信息交互传输的重要渠道之一.你可能经常在网页上传下载文件,你可能 ...
- Struts的文件上传下载
Struts的文件上传下载 1.文件上传 Struts2的文件上传也是使用fileUpload的组件,这个组默认是集合在框架里面的.且是使用拦截器:<interceptor name=" ...
- 艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输)(一)
艺萌TCP文件上传下载及自动更新系统介绍(TCP文件传输) 该系统基于开源的networkComms通讯框架,此通讯框架以前是收费的,目前已经免费并开元,作者是英国的,开发时间5年多,框架很稳定. 项 ...
- SpringMVC文件上传下载
在Spring MVC的基础框架搭建起来后,我们测试了spring mvc中的返回值类型,如果你还没有搭建好springmvc的架构请参考博文->http://www.cnblogs.com/q ...
- FastDFS实现文件上传下载实战
正好,淘淘商城讲这一块的时候,我又想起来当时老徐让我写过一个关于实现FastDFS实现文件上传下载的使用文档,当时结合我们的ITOO的视频系统和毕业论文系统,整理了一下,有根据网上查到的知识,总结了一 ...
随机推荐
- 阿里百秀后台管理项目笔记 ---- Day03
来吧展示: step1:所有文章数据展示 引入 functions.php 文件执行数据库查询以及判断用户登录状态 require_once '../functions.php'; get_useri ...
- 最长上升子序列 II 时间复杂度(nlogn)
题目:最长上升子序列 II 给定一个长度为 N 的数列,求数值严格单调递增的子序列的长度最长是多少. 输入格式 第一行包含整数 N. 第二行包含 N个整数,表示完整序列. 输出格式 输出一个整数,表示 ...
- Eclpis-cannot open git-receive-pack
转载:https://blog.csdn.net/qq_29954971/article/details/80191193 问题:在采用MyEclipse软件(JDK1.7)作为开发环境,利用GitH ...
- MySQL 中的事务理解
MySQL 中的事务 前言 原子性 一致性 持久性 并发事务存在的问题 脏读 幻读 不可重复读 隔离性 事务的隔离级别 事务隔离是如何实现 可重复读 和 读提交 串行化 读未提交 可重复读解决了幻读吗 ...
- 远程控制 todesk
最近发现的一个好用的远程连接软件 便是近些年推出来的 todesk 虽然qq的远程 和 向日葵的 远程连接也都可以达到我要实现的效果 但是体验起来的话 我个人还是觉得 todesk更好用一些 下载地址 ...
- 深度学习-RNN
目录 I.前言 介绍RNN的概念和应用 II. RNN基础 RNN的概念和结构 RNN的前向传播和反向传播算法 前向传播算法 反向传播 RNN的变种:LSTM和GRU LSTM GRU III. RN ...
- JZOJ 5947.初音未来(miku)
题目大意 维护一个数列 \(a_n\),\(m\) 次操作,每次对区间 \([l..r]\) 进行升序排序 求最后询问区间 \([L..R]\),输出 \(a_L,a_{L+1},···,a_{R}\ ...
- kubernetes client-go功能介绍
原味地址 https://haiyux.cc/2023/02/26/k8s-client-go/ client-go是什么? client-go是Kubernetes官方提供的Go语言客户端库,用于与 ...
- 浏览器调试工具devtool
视频网址 先打开devtool,再打开命令菜单.可以用screenshot来截屏 $0:先在element点击元素,再在控制台输入$0,这个$0代表element中选中的DOM元素. $1,$2... ...
- 96、nacos大量日志
问题描述:access 日志大量打印,相关 Issue 点击这里.主要表现是: {nacos.home}/logs/access_log.2019-xx-xx.log类似格式文件名的日志大量打印,而且 ...