本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下
一、文件上传(基于axios的简单上传)
所使用的技术:axios、springboot、vue;
实现思路:通过h5 :input元素标签进行选择文件,获取所选选择的文件路径,new fromdata对象,设置fromdata的参数,设置axios对应的请求头,最后通过axios发送post请求后端服务。后端服务同过MultipartFile进行文件接收。具体代码如下:
前端代码:
1、创建vue对象
1
2
3
4
5
6
7
8
9
10
11
12
|
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import http from 'axios'
Vue.config.productionTip = false ;
Vue.prototype.$http=http;
window.vm= new Vue({
router,
store,
render: h => h(App)
}).$mount( '#app' )
|
2、实现上传组件
在input标签中添加改变事件监听,当发生改变时调用up方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
< template >
< div class = "hello" >
< input
class = "file"
name = "file"
type = "file"
accept = "image/png, image/gif, image/jpeg"
@ change = "up"
/>
</ div >
</ template >
< script >
export default {
name: "HelloWorld",
props: {
msg: String
},
methods: {
up(e) {
let file = e.target.files[0];
alert(file.name);
console.log(file);
let param = new FormData(); //创建form对象
param.append("file", file); //通过append向form对象添加数据
console.log(param.get("file")); //FormData私有类对象,访问不到,可以通过get判断值是否传进去
let config = {
headers: { "Content-Type": "multipart/form-data" }
}; //添加请求头
this.$http
.post("http://127.0.0.1:8081/data/up", param, config)
.then(response => {
console.log(response.data);
}).catch(
error=>{
alert("失败");
}
);
}
}
};
</ script >
<!-- Add "scoped" attribute to limit CSS to this component only -->
< style scoped lang = "less" >
</ style >
|
后端代码:
上传文件代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
@RequestMapping (value = "/up" , method = RequestMethod.POST)
@ResponseBody
public Result<String> uploade( @RequestParam ( "file" ) MultipartFile file) {
try {
log.error( "开始上传!!!" );
String originalFilename = file.getOriginalFilename();
InputStream inputStream = file.getInputStream();
String path= "d:/2020test/" ;
File file1 = new File(path + originalFilename);
if (!file1.getParentFile().exists()){
file1.getParentFile().mkdirs();
}
file.transferTo(file1);
log.info( "上传成功!" );
} catch (IOException e) {
e.printStackTrace();
}
Result<String> stringResult = new Result<String>();
stringResult.setMsg( "sue" );
stringResult.setData( "file" );
return stringResult;
}
|
二、文件下载
通过response输出流返回文件内容,核心代码设置下载文件的名字(res.setHeader(“Content-Disposition”, “attachment;filename=” + java.net.URLEncoder.encode(realFileName.trim(), “UTF-8”));)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
@RequestMapping (value = "/get" , method = RequestMethod.GET)
public void downloadFile(HttpServletResponse res) {
String realFileName= "C:/Users/xiongyi/Desktop/12.xls" ;
File excelFile = new File(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 (UnsupportedEncodingException e1) {
e1.printStackTrace();
}
byte [] buff = new byte [ 1024 ];
BufferedInputStream bis = null ;
OutputStream os = null ;
try {
os = res.getOutputStream();
bis = new BufferedInputStream( new FileInputStream( new File(realFileName)));
int i = bis.read(buff);
while (i != - 1 ) {
os.write(buff, 0 , buff.length);
os.flush();
i = bis.read(buff);
}
} catch (IOException e) {
e.printStackTrace();
} finally {
if (bis != null ) {
try {
bis.close();
} catch (IOException e) {
}
}
}
Result<String> stringResult = new Result<String>();
stringResult.setMsg( "sue" );
stringResult.setData( "nimabi" );
}
|
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。
原文链接:https://blog.csdn.net/qq_22744093/article/details/105616745