明霞山资源网 Design By www.htccd.com
本文实例为大家分享了springboot+vue实现文件上传下载的具体代码,供大家参考,具体内容如下
一、文件上传(基于axios的简单上传)
所使用的技术:axios、springboot、vue;
实现思路:通过h5 :input元素标签进行选择文件,获取所选选择的文件路径,new fromdata对象,设置fromdata的参数,设置axios对应的请求头,最后通过axios发送post请求后端服务。后端服务同过MultipartFile进行文件接收。具体代码如下:
前端代码:
1、创建vue对象
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方法。
<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>
后端代码:
上传文件代码
@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”));)
@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");
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。