仵航說 前后端分離，檔案上傳下載（springBoot+vue+elementUI）仵老大

1.介紹

? 本文主要是介紹前后端分離的上傳下載,后端使用的是SpringBoot,持久層用的是mybatis-plus,前端用的Vue,UI用的elementUI,測驗了一下,文本,圖片,excel,都是可以上傳下載的,前端就是一個頁面,后端就是一個controller頁面,就可以解決
代碼不清晰的話,我把這個前端的vue 跟 后端的controller代碼,以及本篇文章的MD版本放到了這個鏈接里 https://wwa.lanzous.com/b0cqr478f 密碼:19qb

1.1前端樣子

2.前端

2.1先分享一下前端的全部代碼

<template>
  <div>
    <center>

    </center>
    <div style="float: left;margin-left: 100px">
<!--      <router-link to="/reportTools/customQuery" style="color: darkblue">-->
<!--        上一步-->
<!--      </router-link>-->
      <el-button type="primary"  v-on:click="tocustomQuery" >上一步</el-button>
    </div>
    <div style="float: right;margin-right: 100px">
      <el-button type="primary"  v-on:click="saveResource" >保存</el-button>
    </div>
        <br>
        <h1>基本資訊設定</h1>
    <br>
    <br>
    <center>
    <div style="margin-right: 170px">
  <el-form ref="form" :model="form" label-width="120px" >
    <el-form-item label="報表名稱中文:" style="width: 470px;">
      <el-input v-model="form.reportName" ></el-input>
    </el-form-item>
    <el-form-item label="報表名稱英文:" style="width: 470px;">
      <el-input v-model="form.reportEnName"></el-input>
    </el-form-item>
    <el-form-item label="報表名稱中英文:" style="width: 470px;">
      <el-input v-model="form.reportChEnName"></el-input>
    </el-form-item>
    <el-form-item label="報表備注:" style="width: 470px;">
      <el-input v-model="form.remarks"></el-input>
    </el-form-item>
    <el-form-item label="功能編號" style="width: 470px;">
      <el-input v-model="form.code" ></el-input>
    </el-form-item>
    <el-form-item label="編輯模板:" style="width: 570px;">
      <el-input placeholder="模板地址" style="width: 200px" disabled></el-input>
      <el-upload 
                 :action="uploadUrl"
                 :before-upload="handleBeforeUpload"
                 :on-error="handleUploadError"
                 :before-remove="beforeRemove"
                 multiple
                 :limit="5"
                 :on-exceed="handleExceed"
                 :file-list="fileList">
        <el-button size="small" type="primary">點擊上傳</el-button>
      </el-upload>
      <a href="http://localhost:8080/file/download?fileName=test.xls">下載附件</a>
    </el-form-item>
    <el-form-item label="模板備注:"  style="width: 480px;">
      模板用于下載，列印EXCEL時使用，其中&#123;&nbsp;{CURRENT_USER&#125;&nbsp;&#125;表示當前用戶名，
      &#123;&nbsp;{TITLE&#125;&nbsp;&#125;表示表頭，&#123;&nbsp;{DATA&#125;&nbsp;&#125;表示資料行，&#123;&nbsp;{FOOTER&#125;&nbsp;&#125;表示頁腳區域，
      匯出的內容不可改動，頁眉頁腳區域可以自由編輯，
    </el-form-item>
    <el-form-item >
      <el-select v-model="form.isPublic" style="width: 350px;">
        <el-option label="私有查詢" value="https://www.cnblogs.com/wulaoda/p/2" ></el-option>
        <el-option label="公共查詢" value="https://www.cnblogs.com/wulaoda/p/1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item >
        <el-checkbox label="是否列印" v-model="form.isPrinting" true-label="1" false-label="2"></el-checkbox>
        <el-checkbox label="是否匯出" v-model="form.isExport" true-label="1" false-label="2"></el-checkbox>
      <el-form-item  type="hidden" style="width: 470px;">
      </el-form-item>
    </el-form-item>
  </el-form>
    </div>
    </center>
  </div>
</template>

<script>
import axios from 'axios'
import { uuid } from 'vue-uuid';
export default {
  data() {
    return {
      form: {
        reportName:'',
        reportEnName:'',
        reportChEnName:'',
        remarks:'',
        code:'',
        isPublic:'1',
        isPrinting:"1",
        isExport:"1",

        datas:[{},{},{},{}],
        A0010011:'',
        A0010012:'',
        A0010013:'',
        A0010014:'',



      },
      // uuid1:'',
      // cusList:{},
      uploadUrl: 'file/upload',
      fileList: [],


    }
  },
  created() {

    console.log("上個頁面傳來的是",sessionStorage)
    // this.handleUUIDv1()
    this.form.code = this.$uuid.v1()
    console.log("頁面重繪后新產生的uuid是",this.form.code)

 
  },
  watch:{
    reportName: function (newVal,oldVal) {//新值和原值

      console.log("name改變了 a:"+newVal+"    b:"+oldVal)

    }
  },
  methods: {
    //使用uuid
    // handleUUIDv1() {
    //   this.uuid1 = this.$uuid.v1()
    // },
    //點擊多選按鈕true和false變成1或者2
    reset(form){
      this.$refs['form'].resetFields();
    },
    //獲取上個頁面傳來的資料
    getcustomQuery() {

      let reportName=this.form.reportName
      sessionStorage.setItem("reportName",reportName)
      let reportEnName = this.form.reportEnName
      sessionStorage.setItem("reportEnName",reportEnName)
      let reportChEnName = this.form.reportChEnName
      sessionStorage.setItem("reportChEnName",reportChEnName)
      let remarks = this.form.remarks
      sessionStorage.setItem("remarks",remarks)
      let code = this.form.code
      sessionStorage.setItem("code",code)
      let isPublic = this.form.isPublic
      sessionStorage.setItem("isPublic",isPublic)
      let isPrinting = this.form.isPrinting
      sessionStorage.setItem("isPrinting",isPrinting)
      let isExport = this.form.isExport
      sessionStorage.setItem("isExport",isExport)



      console.log("上個頁面傳來的是",sessionStorage)
    },
    // this.$router.push('/reportTools/cusMain'),點擊保存發送鏈接 并跳轉
    tocustomQuery(){
      this.$router.push('/reportTools/customQuery')
    },

    saveResource(){
      console.log("當前頁面表單的資料",this.form)
      // sessionStorage.setItem("params",JSON.stringify(this.form))
      console.log("sessionStorage中的資料",sessionStorage)
      this.getcustomQuery()
      this.$http.post("http://localhost:8080/reporttools/report-show/addReportShow",sessionStorage).then(
        resp=>{
        console.log(resp)
          //this.$router.push('/reportTools/cusMain')
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`當前限制選擇 5 個檔案，本次選擇了 ${files.length} 個檔案，共選擇了 ${files.length + fileList.length} 個檔案`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`確定移除 ${ file.name }？`);
    },
    handleUploadError(error, file) {
      console.log("檔案上傳出錯："+error)
    },
    //測驗上傳檔案(注意web的背景關系)
    handleBeforeUpload(file){
      console.log("開始上傳，上傳的檔案為："+file)
      let formData = https://www.cnblogs.com/wulaoda/p/new FormData();
      formData.append("multipartFiles", file);
      axios({
        method: 'post',
        url: 'file/upload',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data' }
      }).then((res) => {
        console.log("檔案上傳回傳："+res)
      }).catch(error => {
        console.log("檔案上傳例外:"+error)
      })
    },
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
</style>

2.2分享一下前端template層的代碼

2.2.1上傳下載template全部代碼

<el-upload 
                 :action="uploadUrl"
                 :before-upload="handleBeforeUpload"
                 :on-error="handleUploadError"
                 :before-remove="beforeRemove"
                 multiple
                 :limit="5"
                 :on-exceed="handleExceed"
                 :file-list="fileList">
        <el-button size="small" type="primary">點擊上傳</el-button>
      </el-upload>
      <a href="http://localhost:8080/file/download?fileName=test.xls">下載附件</a>

2.2.2 上傳代碼

<el-upload 
                 :action="uploadUrl"
                 :before-upload="handleBeforeUpload"
                 :on-error="handleUploadError"
                 :before-remove="beforeRemove"
                 multiple
                 :limit="5"
                 :on-exceed="handleExceed"
                 :file-list="fileList">
        <el-button size="small" type="primary">點擊上傳</el-button>
      </el-upload>

2.2.3下載代碼

下載代碼就是一個a標簽

 <a href="http://localhost:8080/file/download?fileName=test.xls">下載附件</a>

2.3分享一下前端script代碼

<script>
import axios from 'axios'
import { uuid } from 'vue-uuid';
export default {
  data() {
    return {
      form: {
        reportName:'',
        reportEnName:'',
        reportChEnName:'',
        remarks:'',
        code:'',
        isPublic:'1',
        isPrinting:"1",
        isExport:"1",

        datas:[{},{},{},{}],
        A0010011:'',
        A0010012:'',
        A0010013:'',
        A0010014:'',



      },
      // uuid1:'',
      // cusList:{},
      uploadUrl: 'file/upload',
      fileList: [],


    }
  },
  created() {

    console.log("上個頁面傳來的是",sessionStorage)
    // this.handleUUIDv1()
    this.form.code = this.$uuid.v1()
    console.log("頁面重繪后新產生的uuid是",this.form.code)

  },
  watch:{
    reportName: function (newVal,oldVal) {//新值和原值

      console.log("name改變了 a:"+newVal+"    b:"+oldVal)

    }
  },
  methods: {
    //使用uuid
    // handleUUIDv1() {
    //   this.uuid1 = this.$uuid.v1()
    // },
    //點擊多選按鈕true和false變成1或者2
    reset(form){
      this.$refs['form'].resetFields();
    },
    //獲取上個頁面傳來的資料
    getcustomQuery() {

      let reportName=this.form.reportName
      sessionStorage.setItem("reportName",reportName)
      let reportEnName = this.form.reportEnName
      sessionStorage.setItem("reportEnName",reportEnName)
      let reportChEnName = this.form.reportChEnName
      sessionStorage.setItem("reportChEnName",reportChEnName)
      let remarks = this.form.remarks
      sessionStorage.setItem("remarks",remarks)
      let code = this.form.code
      sessionStorage.setItem("code",code)
      let isPublic = this.form.isPublic
      sessionStorage.setItem("isPublic",isPublic)
      let isPrinting = this.form.isPrinting
      sessionStorage.setItem("isPrinting",isPrinting)
      let isExport = this.form.isExport
      sessionStorage.setItem("isExport",isExport)






      console.log("上個頁面傳來的是",sessionStorage)
    },
    // this.$router.push('/reportTools/cusMain'),點擊保存發送鏈接 并跳轉
    tocustomQuery(){
      this.$router.push('/reportTools/customQuery')
    },

    saveResource(){
      console.log("當前頁面表單的資料",this.form)
      // sessionStorage.setItem("params",JSON.stringify(this.form))
      console.log("sessionStorage中的資料",sessionStorage)
      this.getcustomQuery()
      this.$http.post("http://localhost:8080/reporttools/report-show/addReportShow",sessionStorage).then(
        resp=>{
        console.log(resp)
          //this.$router.push('/reportTools/cusMain')
      })
    },
    handleExceed(files, fileList) {
      this.$message.warning(`當前限制選擇 5 個檔案，本次選擇了 ${files.length} 個檔案，共選擇了 ${files.length + fileList.length} 個檔案`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`確定移除 ${ file.name }？`);
    },
    handleUploadError(error, file) {
      console.log("檔案上傳出錯："+error)
    },
    //測驗上傳檔案(注意web的背景關系)
    handleBeforeUpload(file){
      console.log("開始上傳，上傳的檔案為："+file)
      let formData = https://www.cnblogs.com/wulaoda/p/new FormData();
      formData.append("multipartFiles", file);
      axios({
        method: 'post',
        url: 'http://localhost:8080/file/upload',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data' }
      }).then((res) => {
        console.log("檔案上傳回傳："+res)
      }).catch(error => {
        console.log("檔案上傳例外:"+error)
      })
    },
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
</style>

2.3.1上傳script全部代碼

主要是對前端做一些限制

handleExceed(files, fileList) {
  this.$message.warning(`當前限制選擇 5 個檔案，本次選擇了 ${files.length} 個檔案，共選擇了 ${files.length + fileList.length} 個檔案`);
},
beforeRemove(file, fileList) {
  return this.$confirm(`確定移除 ${ file.name }？`);
},
handleUploadError(error, file) {
  console.log("檔案上傳出錯："+error)
},
//測驗上傳檔案(注意web的背景關系)
handleBeforeUpload(file){
  console.log("開始上傳，上傳的檔案為："+file)
  let formData = https://www.cnblogs.com/wulaoda/p/new FormData();
  formData.append("multipartFiles", file);
  axios({
    method: 'post',
    url: 'http://localhost:8080/file/upload',
    data: formData,
    headers: {'Content-Type': 'multipart/form-data' }
  }).then((res) => {
    console.log("檔案上傳回傳："+res)
  }).catch(error => {
    console.log("檔案上傳例外:"+error)
  })
},

2.3.2在data的return里添加

 uploadUrl: 'file/upload',
    fileList: [],

也就是在data層的 return里寫

data(){
    return {
    	 uploadUrl: 'http://localhost:8080/file/upload',
    		fileList: [],
	}
}

就這樣前端就完成了

后端主要就是一個controller層

2.3.3Axios的引入

很重要的一個,因為我的寫法不一樣可能有不兼容的地方,有的vue不能這么寫,所以需要引入一下

直接引入就可以,在script里面,

不會就看我上面分享的

import axios from 'axios'

3.后端

3.1后端全部代碼

package com.ciic.reporter.updownload.controller;


import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;


@RestController
@RequestMapping("file")
public class CiicUpDownloadController {
    private  final static String rootPath = "E:/attachment/";

    @RequestMapping("/upload")
    public  Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){
        File fileDir = new File(rootPath);
        if (!fileDir.exists() && !fileDir.isDirectory()) {
            fileDir.mkdirs();
        }
        try {
            if (multipartFiles != null && multipartFiles.length > 0) {
                for(int i = 0;i<multipartFiles.length;i++){
                    try {
                        //以原來的名稱命名,覆寫掉舊的，這里也可以使用UUID之類的方式命名，這里就沒有處理了
                        String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
                        System.out.println("上傳的檔案：" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
                                +"，保存的路徑為：" + storagePath);
                        // 3種方法： 第1種
//                        Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
                        // 第2種
                        Path path = Paths.get(storagePath);
                        Files.write(path,multipartFiles[i].getBytes());
                        // 第3種
                       // multipartFiles[i].transferTo(new File(storagePath));
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        //前端可以通過狀態碼，判斷檔案是否上傳成功
        return "檔案上傳成功";
    }


    /**
     *
     * @param fileName 檔案名
     * @param response
     * @return
     */
    @RequestMapping("/download")
    public Object downloadFile(@RequestParam String fileName, HttpServletResponse response){
        OutputStream os = null;
        InputStream is= null;
        try {
            // 取得輸出流
            os = response.getOutputStream();
            // 清空輸出流
            response.reset();
            response.setContentType("application/x-download;charset=utf-8");
            //Content-Disposition中指定的型別是檔案的擴展名，并且彈出的下載對話框中的檔案型別圖片是按照檔案的擴展名顯示的，點保存后，檔案以filename的值命名，
            // 保存型別以Content中設定的為準，注意：在設定Content-Disposition頭欄位之前，一定要設定Content-Type頭欄位，
            //把檔案名按UTF-8取出，并按ISO8859-1編碼，保證彈出視窗中的檔案名中文不亂碼，中文不要太多，最多支持17個中文，因為header有150個位元組限制，
            response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"),"ISO8859-1"));
            //讀取流
            File f = new File(rootPath+fileName);
            is = new FileInputStream(f);
            if (is == null) {
                System.out.println("下載附件失敗，請檢查檔案“" + fileName + "”是否存在");
                return "下載附件失敗，請檢查檔案“" + fileName + "”是否存在";
            }
            //復制
            IOUtils.copy(is, response.getOutputStream());
            response.getOutputStream().flush();
        } catch (IOException e) {
            return "下載附件失敗,error:"+e.getMessage();
        }
        //檔案的關閉放在finally中
        finally
        {
            try {
                if (is != null) {
                    is.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            try {
                if (os != null) {
                    os.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        //其實，這個回傳什么都不重要
        return "下載成功";
    }

}

3.2后端定義一個class類

@RestController
@RequestMapping("file")
public class CiicUpDownloadController {

}

3.3后端定義一個上傳的路徑

  private  final static String rootPath = "E:/attachment/";

3.3.1加上上面定義的類也就是

@RestController
@RequestMapping("file")
public class CiicUpDownloadController {
	 private  final static String rootPath = "E:/attachment/";
}

3.4后端定義上傳方法

 @RequestMapping("/upload")
    public  Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){
        File fileDir = new File(rootPath);
        if (!fileDir.exists() && !fileDir.isDirectory()) {
            fileDir.mkdirs();
        }
        try {
            if (multipartFiles != null && multipartFiles.length > 0) {
                for(int i = 0;i<multipartFiles.length;i++){
                    try {
                        //以原來的名稱命名,覆寫掉舊的，這里也可以使用UUID之類的方式命名，這里就沒有處理了
                        String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
                        System.out.println("上傳的檔案：" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
                                +"，保存的路徑為：" + storagePath);
                        // 3種方法： 第1種
//                        Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
                        // 第2種
                        Path path = Paths.get(storagePath);
                        Files.write(path,multipartFiles[i].getBytes());
                        // 第3種
                       // multipartFiles[i].transferTo(new File(storagePath));
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        //前端可以通過狀態碼，判斷檔案是否上傳成功
        return "檔案上傳成功";
    }

3.4.3加上之前的路徑和類就是

@RestController
@RequestMapping("file")
public class CiicUpDownloadController {
    private  final static String rootPath = "E:/attachment/";

    @RequestMapping("/upload")
    public  Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){
        File fileDir = new File(rootPath);
        if (!fileDir.exists() && !fileDir.isDirectory()) {
            fileDir.mkdirs();
        }
        try {
            if (multipartFiles != null && multipartFiles.length > 0) {
                for(int i = 0;i<multipartFiles.length;i++){
                    try {
                        //以原來的名稱命名,覆寫掉舊的，這里也可以使用UUID之類的方式命名，這里就沒有處理了
                        String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
                        System.out.println("上傳的檔案：" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
                                +"，保存的路徑為：" + storagePath);
                        // 3種方法： 第1種
//                        Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
                        // 第2種
                        Path path = Paths.get(storagePath);
                        Files.write(path,multipartFiles[i].getBytes());
                        // 第3種
                       // multipartFiles[i].transferTo(new File(storagePath));
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        //前端可以通過狀態碼，判斷檔案是否上傳成功
        return "檔案上傳成功";
    }
}

3.5后端定義下載方法

/**
     *
     * @param fileName 檔案名
     * @param response
     * @return
     */
    @RequestMapping("/download")
    public Object downloadFile(@RequestParam String fileName, HttpServletResponse response){
        OutputStream os = null;
        InputStream is= null;
        try {
            // 取得輸出流
            os = response.getOutputStream();
            // 清空輸出流
            response.reset();
            response.setContentType("application/x-download;charset=utf-8");
            //Content-Disposition中指定的型別是檔案的擴展名，并且彈出的下載對話框中的檔案型別圖片是按照檔案的擴展名顯示的，點保存后，檔案以filename的值命名，
            // 保存型別以Content中設定的為準，注意：在設定Content-Disposition頭欄位之前，一定要設定Content-Type頭欄位，
            //把檔案名按UTF-8取出，并按ISO8859-1編碼，保證彈出視窗中的檔案名中文不亂碼，中文不要太多，最多支持17個中文，因為header有150個位元組限制，
            response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"),"ISO8859-1"));
            //讀取流
            File f = new File(rootPath+fileName);
            is = new FileInputStream(f);
            if (is == null) {
                System.out.println("下載附件失敗，請檢查檔案“" + fileName + "”是否存在");
                return "下載附件失敗，請檢查檔案“" + fileName + "”是否存在";
            }
            //復制
            IOUtils.copy(is, response.getOutputStream());
            response.getOutputStream().flush();
        } catch (IOException e) {
            return "下載附件失敗,error:"+e.getMessage();
        }
        //檔案的關閉放在finally中
        finally
        {
            try {
                if (is != null) {
                    is.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            try {
                if (os != null) {
                    os.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        //其實，這個回傳什么都不重要
        return "下載成功";
    }

3.5.1加上之前定義的路徑類和上傳方法就是

package com.ciic.reporter.updownload.controller;


import org.apache.tomcat.util.http.fileupload.IOUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.nio.file.Files;
import java.nio.file.Path;
import java.nio.file.Paths;


@RestController
@RequestMapping("file")
public class CiicUpDownloadController {
    private  final static String rootPath = "E:/attachment/";

    @RequestMapping("/upload")
    public  Object uploadFile(@RequestParam("file") MultipartFile[] multipartFiles){
        File fileDir = new File(rootPath);
        if (!fileDir.exists() && !fileDir.isDirectory()) {
            fileDir.mkdirs();
        }
        try {
            if (multipartFiles != null && multipartFiles.length > 0) {
                for(int i = 0;i<multipartFiles.length;i++){
                    try {
                        //以原來的名稱命名,覆寫掉舊的，這里也可以使用UUID之類的方式命名，這里就沒有處理了
                        String storagePath = rootPath+multipartFiles[i].getOriginalFilename();
                        System.out.println("上傳的檔案：" + multipartFiles[i].getName() + "," + multipartFiles[i].getContentType() + "," + multipartFiles[i].getOriginalFilename()
                                +"，保存的路徑為：" + storagePath);
                        // 3種方法： 第1種
//                        Streams.copy(multipartFiles[i].getInputStream(), new FileOutputStream(storagePath), true);
                        // 第2種
                        Path path = Paths.get(storagePath);
                        Files.write(path,multipartFiles[i].getBytes());
                        // 第3種
                       // multipartFiles[i].transferTo(new File(storagePath));
                    } catch (IOException e) {
                        e.printStackTrace();
                    }
                }
            }

        } catch (Exception e) {
            e.printStackTrace();
        }
        //前端可以通過狀態碼，判斷檔案是否上傳成功
        return "檔案上傳成功";
    }


    /**
     *
     * @param fileName 檔案名
     * @param response
     * @return
     */
    @RequestMapping("/download")
    public Object downloadFile(@RequestParam String fileName, HttpServletResponse response){
        OutputStream os = null;
        InputStream is= null;
        try {
            // 取得輸出流
            os = response.getOutputStream();
            // 清空輸出流
            response.reset();
            response.setContentType("application/x-download;charset=utf-8");
            //Content-Disposition中指定的型別是檔案的擴展名，并且彈出的下載對話框中的檔案型別圖片是按照檔案的擴展名顯示的，點保存后，檔案以filename的值命名，
            // 保存型別以Content中設定的為準，注意：在設定Content-Disposition頭欄位之前，一定要設定Content-Type頭欄位，
            //把檔案名按UTF-8取出，并按ISO8859-1編碼，保證彈出視窗中的檔案名中文不亂碼，中文不要太多，最多支持17個中文，因為header有150個位元組限制，
            response.setHeader("Content-Disposition", "attachment;filename="+ new String(fileName.getBytes("utf-8"),"ISO8859-1"));
            //讀取流
            File f = new File(rootPath+fileName);
            is = new FileInputStream(f);
            if (is == null) {
                System.out.println("下載附件失敗，請檢查檔案“" + fileName + "”是否存在");
                return "下載附件失敗，請檢查檔案“" + fileName + "”是否存在";
            }
            //復制
            IOUtils.copy(is, response.getOutputStream());
            response.getOutputStream().flush();
        } catch (IOException e) {
            return "下載附件失敗,error:"+e.getMessage();
        }
        //檔案的關閉放在finally中
        finally
        {
            try {
                if (is != null) {
                    is.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
            try {
                if (os != null) {
                    os.close();
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        //其實，這個回傳什么都不重要
        return "下載成功";
    }

}

謝謝大家的閱讀，原創不易，喜歡就隨手點個贊??，這將是我最強的寫作動力，如果覺得文章對你有點幫助，還挺有趣，就關注一下我的公眾號「仵航」

標籤：Java

上一篇：java~jar防止反編譯

下一篇：[JVM工具(1)] 堆疊檢查利器jstat的使用