快捷導(dǎo)航

springboot+vue實(shí)現(xiàn)文件上傳下載

更新時(shí)間：2020年11月17日 15:39:45 作者：科學(xué)熊

這篇文章主要為大家詳細(xì)介紹了springboot+vue實(shí)現(xiàn)文件上傳下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(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
  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私有類(lèi)對(duì)象，訪(fǎng)問(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: