springboot+vue实现文件上传下载

2023-07-11 14:29:03 168

本文实例为大家分享了springboot+vue实现文件上传下载的具体代码，供大家参考，具体内容如下

一、文件上传（基于axios的简单上传）

所使用的技术：axios、springboot、vue;
实现思路：通过h5：input元素标签进行选择文件，获取所选选择的文件路径，newfromdata对象，设置fromdata的参数，设置axios对应的请求头，最后通过axios发送post请求后端服务。后端服务同过MultipartFile进行文件接收。具体代码如下：

前端代码：

1、创建vue对象

importVuefrom'vue'
importAppfrom'./App.vue'
importrouterfrom'./router'
importstorefrom'./store'
importhttpfrom'axios'
Vue.config.productionTip=false;
Vue.prototype.$http=http;
window.vm=newVue({
router,
store,
render:h=>h(App)
}).$mount('#app')

2、实现上传组件

在input标签中添加改变事件监听，当发生改变时调用up方法。

后端代码：

上传文件代码

@RequestMapping(value="/up",method=RequestMethod.POST)
@ResponseBody
publicResultuploade(@RequestParam("file")MultipartFilefile){
try{
log.error("开始上传！！！");
StringoriginalFilename=file.getOriginalFilename();
InputStreaminputStream=file.getInputStream();
Stringpath="d:/2020test/";
Filefile1=newFile(path+originalFilename);
if(!file1.getParentFile().exists()){
file1.getParentFile().mkdirs();
}
file.transferTo(file1);
log.info("上传成功！");
}catch(IOExceptione){
e.printStackTrace();
}
ResultstringResult=newResult();
stringResult.setMsg("sue");
stringResult.setData("file");
returnstringResult;
}

二、文件下载

通过response输出流返回文件内容，核心代码设置下载文件的名字（res.setHeader(“Content-Disposition”,“attachment;filename=”+java.net.URLEncoder.encode(realFileName.trim(),“UTF-8”));）

@RequestMapping(value="/get",method=RequestMethod.GET)
publicvoiddownloadFile(HttpServletResponseres){
StringrealFileName="C:/Users/xiongyi/Desktop/12.xls";
FileexcelFile=newFile(realFileName);
res.setCharacterEncoding("UTF-8");
res.setHeader("content-type","application/octet-stream;charset=UTF-8");
res.setContentType("application/octet-stream;charset=UTF-8");
//加上设置大小下载下来的.xlsx文件打开时才不会报“Excel已完成文件级验证和修复。此工作簿的某些部分可能已被修复或丢弃”
//res.addHeader("Content-Length",String.valueOf(excelFile.length()));
try{
res.setHeader("Content-Disposition","attachment;filename="+java.net.URLEncoder.encode(realFileName.trim(),"UTF-8"));
}catch(UnsupportedEncodingExceptione1){
e1.printStackTrace();
}
byte[]buff=newbyte[1024];
BufferedInputStreambis=null;
OutputStreamos=null;
try{
os=res.getOutputStream();
bis=newBufferedInputStream(newFileInputStream(newFile(realFileName)));
inti=bis.read(buff);
while(i!=-1){
os.write(buff,0,buff.length);
os.flush();
i=bis.read(buff);
}
}catch(IOExceptione){
e.printStackTrace();
}finally{
if(bis!=null){
try{
bis.close();
}catch(IOExceptione){
}
}
}
ResultstringResult=newResult();
stringResult.setMsg("sue");
stringResult.setData("nimabi");
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

springboot+vue实现文件上传下载

热门推荐

随机推荐