SpringBoot项目 前后端分离 ajax附件上传下载
前台界面
上传
下载
前台代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>附件上传、下载</title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<br />
<p>
附件上传、下载</p>
<br />
<form enctype="multipart/form-data" id="upload">
文件：<input type="file" name="file" id="file" />
<input type="button" value="上传" onclick="fn_upload()" />
</form>
<br />
<input type="text" id="file_name" style="width: 296px;" />
<input type="button" value="下载" onclick="fn_download()" />
<script type="text/javascript">
function fn_download() {
var file_name = $("#file_name").val();
if (file_name == "") {
alert("请输入下载文件名称！");
$("#file_name").focus();
return;
}
var url = "http://127.0.0.1:8080/file/download?file_name=" + file_name;
var a = document.createElement("a");
a.href = url;
a.click();
}
function fn_upload() {
var file = $('#file')[0].files[0];
if (file == undefined) {
alert("请选择文件！");
return;
}
var formData = new FormData($('#upload')[0]);
formData.append('file', file);
formData.append('fid', "10"); //其他参数 比如外键ID
jQuery.support.cors = true;
$.ajax({
url: "http://127.0.0.1:8080/file/upload",
type: "POST",
data: formData,
processData: false, //不需要对数据做任何预处理
contentType: false, //不设置数据格式
timeout: 5000,
error: function (XMLHttpRequest, textStatus, errorThrown) {
if (XMLHttpRequest.responseText == "") {
alert("请求超时,请检查网络!", { icon: 2 });
} else {
alert(XMLHttpRequest.statusText, { icon: 2 });
}
},
success: function (d) {
if (d.code == 0) {
alert("上传成功！");
$("#file_name").val(d.data)
} else {
alert("删除失败" + d.msg);
}
}
});
}
</script>
</body>
</html>
后台项目结构
后台主要代码
package com.lxw.uploaddownload.controller;
import com.lxw.uploaddownload.common.Response;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.text.SimpleDateFormat;
import java.util.Date;
@RestController
@RequestMapping("/file")
public class FileController {
@Value("${filePath}")
private String filePath;
private static final Logger logger = LoggerFactory.getLogger(FileController.class);
//上传文件
@PostMapping("/upload")
@ResponseBody
public Response uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("fid") Integer fid, HttpServletResponse response) {
if (file.isEmpty()) {
return new Response().error("上传失败，请选择文件");
}
// 获得提交的文件名
String fileName = file.getOriginalFilename();
// 获取文件输入流
//InputStream ins = file.getInputStream();
// 获取文件类型
//String contentType = file.getContentType();
//加个时间戳，尽量避免文件名称重复
fileName = new SimpleDateFormat("yyyyMMddHHmmssSSSS").format(new Date()) + "_" + fileName;
File dest = new File(filePath + fileName);
if (!dest.getParentFile().exists()) { //判断文件父目录是否存在
dest.getParentFile().mkdir();
}
try {
file.transferTo(dest);
//logger.info("上传成功");
return new Response().success(fileName);
} catch (Exception e) {
//logger.error(e.getMessage());
return new Response().error("上传失败");
}
}
//下载文件
@GetMapping(value = "/download")
public void downloadFile(@RequestParam(name = "file_name") String fileName,
HttpServletRequest request,
HttpServletResponse response) throws IOException {
//logger.info("download....file_name:" + fileName);
File file = new File(filePath + "/" + fileName);
if (file.exists()) { //判断文件是否存在
response.setContentType("application/force-download");
response.setHeader("Content-Disposition", "attachment;fileName=" + fileName);
byte[] buffer = new byte[1024];
FileInputStream fis = null; //文件输入流
BufferedInputStream bis = null;
OutputStream os = null; //输出流
try {
os = response.getOutputStream();
fis = new FileInputStream(file);
bis = new BufferedInputStream(fis);
int i = bis.read(buffer);
while (i != -1) {
os.write(buffer);
i = bis.read(buffer);
}
} catch (Exception e) {
e.printStackTrace();
}
logger.info("----------file download" + fileName);
try {
bis.close();
fis.close();
} catch (IOException e) {
e.printStackTrace();
}
}else{
response.setStatus(404);
}
}
}
调整对下载不存在文件的处理
效果
代码
if (file.exists()) { //判断文件是否存在
//
} else {
try {
response.setContentType("text/html; charset=UTF-8"); //转码
PrintWriter out = response.getWriter();
out.flush();
out.println("文件不存在或已经被删除！");
} catch (IOException e) {
// logger.error("下载文件出错:" + e);
}
}SpringBoot项目 前后端分离 ajax附件上传下载的更多相关文章
- 仵航说 前后端分离，文件上传下载（springBoot+vue+elementUI）仵老大
1.介绍 本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel ...
- Ueditor 前后端分离实现文件上传到独立服务器
关于Ueditor 前后端分离实现文件上传到独立服务器,在网上搜索确实遇到大坑,不过还好遇到了 虚若影 最终实现了,在此感谢!虚若影的原文博客网址:http://www.cnblogs.com/hpn ...
- UEditor实现前后端分离时单图上传
首先,需要下载部署ueditor相关代码,可以参考一篇简单的博客,这里不再赘述: 环境搭建好后,我们先简单使用一下,启动http://web.yucong.com:8080/ueditor/index ...
- 关于Ueditor 前后端分离实现文件上传到独立服务器的问题 望大神们赐教
最近,由于网站实现多台服务器负载均衡,导致编辑器上传文件需要同步,可是使用同步软件太慢,不太现实,所以想到实现编辑器上传文件直接上传到独立文件服务器.可是没想到遇到坑了. 1.在本地IIS 中添加网站 ...
- 前后端分离--ajaxUpload异步上传文件成功,前端获取数据却失败的解决方案
转载:https://blog.csdn.net/baidu_32809053/article/details/78709951
- Springboot+vue前后端分离项目，poi导出excel提供用户下载的解决方案
因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...
- SpringBoot+Vue前后端分离项目，在过滤器取值为Null
SpringBoot+Vue前后端分离项目,在过滤器取值为Null 是因为SessionID的问题,因为axios每次的请求都是一次新的sessionId,所以只需要在main.js下配置如下 axi ...
- springboot+apache前后端分离部署https
目录 1. 引言 2. 了解https.证书.openssl及keytool 2.1 https 2.1.1 什么是https 2.1.2 https解决什么问题 2.2 证书 2.2.1 证书内容 ...
- SpringBoot+Vue前后端分离，使用SpringSecurity完美处理权限问题
原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...
- Vue+ElementUI+Springboot实现前后端分离的一个demo
目录 1.前期准备 2.创建一个vue项目 3.vue前端 4.java后端 5.启动 5.1.启动vue项目 5.2.启动后端 6.效果 7.总结 8.参考资料 vue官方文档:介绍 - Vue.j ...
随机推荐
- 问题解决：Ubuntu18.04显示器分辨率不正常
在Ubuntu18.04下出现显示器分辨率不正确的情况,只能选择1024x768的分辨率,没有其它选项,显示器本身可以支持1920x1080的分辨率.经查询,采用cvt, xrandr的方法不成功,显 ...
- Programming Abstractions in C阅读笔记：p293-p302
<Programming Abstractions in C>学习第73天,p293-p302总结,总计10页. 一.技术总结 1.时间复杂度 (1)quadratic time(二次时间 ...
- VMware虚拟机Ubuntu系统如何占满整个屏幕
VMware虚拟机Ubuntu系统分辨率调节 桌面右击--Disoplay Settings 选择一个跟本机系统一样或者相近的.(本机小米笔记本win11,具体看自己的情况) 结束.
- Html飞机大战(十四): 分数编辑和生命值设定
好家伙,这章让我感受到了面向对象的优势了 1.分数设置 每个种类的敌机分数都设置好了, 那么当我们击毁不同的敌机后,加上不同的分数就行了 但是我们还是要想一下, 我要在哪里放这个分数增加的方法 ...
- 【Azure 存储服务】Azure Blob下面是否可以创建子文件夹
问题描述 如何在Azure Storage Account(存储账户) 门户上为 Container 创建子文件夹? 问题解决 经验证,没有办法在门户上直接创建文件夹,不过可以使用Azure Stor ...
- 2023 年值得一读的技术文章 ｜ NebulaGraph 技术社区
在之前的产品篇,我们了解到了 NebulaGraph 内核及周边工具在 2023 年经历了什么样的变化.伴随着这些特性的变更和上线,在[文章]博客分类中,一篇篇的博文记录下了这些功能背后的设计思考和研 ...
- 从真实案例出发，全方位解读 NebulaGraph 中的执行计划
本文整理自 NebulaGraph 核心开发 Yee 在直播<聊聊执行计划这件事>中的主题分享.分享视频参见 B站:https://www.bilibili.com/video/BV1Cu ...
- 苏宁基于 AI 和图技术的智能监控体系的建设
汤泳,苏宁科技集团智能监控与运维产研中心总监,中国商业联合会智库顾问,致力于海量数据分析.基于深度学习的时间序列分析与预测.自然语言处理和图神经网络的研究.在应用实践中,通过基于 AI 的方式不断完善 ...
- kafka的消费
1.消费方式 consumer 采用 pull(拉) 模式从 broker 中读取数据. push(推)模式很难适应消费速率不同的消费者,因为消息发送速率是由 broker 决定的. 它的目标是尽可能 ...
- 本地部署FastGPT使用在线大语言模型
FastGPT 是一个基于 LLM 大语言模型的知识库问答系统,提供开箱即用的数据处理.模型调用等能力,它背后依赖OneApi开源项目来访问各种大语言模型提供的能力.各大语言模型提供的访问接口规范不尽 ...