本文實(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)聽(tīng)，當(dāng)發(fā)生改變時(shí)調(diào)用up方法。

<template> <div class='hello'> <input 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('開(kāi)始上傳！！！'); 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文件打開(kāi)時(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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。