springboot+vue實(shí)現(xiàn)文件上傳下載
本文實(shí)例為大家分享了springboot+vue實(shí)現(xiàn)文件上傳下載的具體代碼,供大家參考,具體內(nèi)容如下
一、文件上傳(基于axios的簡(jiǎn)單上傳)
所使用的技術(shù):axios、springboot、vue;
實(shí)現(xiàn)思路:通過(guò)h5 :input元素標(biāo)簽進(jìn)行選擇文件,獲取所選選擇的文件路徑,new fromdata對(duì)象,設(shè)置fromdata的參數(shù),設(shè)置axios對(duì)應(yīng)的請(qǐng)求頭,最后通過(guò)axios發(fā)送post請(qǐng)求后端服務(wù)。后端服務(wù)同過(guò)MultipartFile進(jìn)行文件接收。具體代碼如下:
前端代碼:
1、創(chuàng)建vue對(duì)象
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、實(shí)現(xiàn)上傳組件
在input標(biāo)簽中添加改變事件監(jiān)聽,當(dāng)發(fā)生改變時(shí)調(diào)用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(); //創(chuàng)建form對(duì)象 param.append("file", file); //通過(guò)append向form對(duì)象添加數(shù)據(jù) console.log(param.get("file")); //FormData私有類對(duì)象,訪問(wèn)不到,可以通過(guò)get判斷值是否傳進(jìn)去 let config = { headers: { "Content-Type": "multipart/form-data" } }; //添加請(qǐng)求頭 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; }
二、文件下載
通過(guò)response輸出流返回文件內(nèi)容,核心代碼設(shè)置下載文件的名字(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"); //加上設(shè)置大小下載下來(lái)的.xlsx文件打開時(shí)才不會(huì)報(bào)“Excel 已完成文件級(jí)驗(yàn)證和修復(fù)。此工作簿的某些部分可能已被修復(fù)或丟棄” // 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"); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue 2.0學(xué)習(xí)筆記之使用$refs訪問(wèn)Vue中的DOM
這篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之使用$refs訪問(wèn)Vue中的DOM,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù)
Promise就是一個(gè)給一步操作提供的容器,在這個(gè)容器里,有兩個(gè)階段無(wú)法改變的階段,這兩個(gè)階段在文中給大家提到。對(duì)vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù) 的相關(guān)知識(shí)感興趣的朋友,跟隨小編一起看看吧2019-06-06最適應(yīng)的vue.js的form提交涉及多種插件【推薦】
這篇文章主要介紹了最適應(yīng)的vue.js的form提交涉及多種插件,涉及到 vue.js動(dòng)態(tài)添加css樣式 ,tab切換 ,touch,表單提交,驗(yàn)證,toast,數(shù)據(jù)雙向綁定等。需要的朋友可以參考下2018-08-08解讀vue頁(yè)面監(jiān)聽store值改變問(wèn)題
這篇文章主要介紹了解讀vue頁(yè)面監(jiān)聽store值改變問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2022-10-10vue動(dòng)態(tài)注冊(cè)組件實(shí)例代碼詳解
寫本篇文章之前其實(shí)也關(guān)注過(guò)vue中的一個(gè)關(guān)于加載動(dòng)態(tài)組件is的API,最開始研究它只是用來(lái)實(shí)現(xiàn)一個(gè)tab切換的功能,需要的朋友可以參考下2019-05-05調(diào)用createApp?時(shí)Vue工作過(guò)程原理
這篇文章主要為大家介紹了調(diào)用createApp?時(shí)Vue工作過(guò)程原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式
這篇文章主要介紹了vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法分析
這篇文章主要介紹了Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法,總的來(lái)說(shuō)這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達(dá)的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路2022-11-11