亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)聽,當(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

    這篇文章主要介紹了Vue 2.0學(xué)習(xí)筆記之使用$refs訪問(wèn)Vue中的DOM,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-12-12
  • vue中利用Promise封裝jsonp并調(diào)取數(shù)據(jù)

    vue中利用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提交涉及多種插件【推薦】

    這篇文章主要介紹了最適應(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)題

    這篇文章主要介紹了解讀vue頁(yè)面監(jiān)聽store值改變問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。
    2022-10-10
  • vue動(dòng)態(tài)注冊(cè)組件實(shí)例代碼詳解

    vue動(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ò)程原理

    這篇文章主要為大家介紹了調(diào)用createApp?時(shí)Vue工作過(guò)程原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-01-01
  • vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式

    vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式

    這篇文章主要介紹了vue?當(dāng)中組件之間共享數(shù)據(jù)的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • Vue?+?Element?自定義上傳封面組件功能

    Vue?+?Element?自定義上傳封面組件功能

    這篇文章主要介紹了Vue?+?Element?自定義上傳封面組件,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-01-01
  • Vue el-table表頭上引入組件不能實(shí)時(shí)傳參解決方法分析

    Vue 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
  • axios封裝與傳參示例詳解

    axios封裝與傳參示例詳解

    這篇文章主要給大家介紹了關(guān)于axios封裝與傳參的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-10-10

最新評(píng)論