當前位置：首頁 > 前端技术 > vue >内容正文

vue

elementui 按钮表单_前后端分离，文件上传下载（springBoot+vue+elementUI）

發布時間：2024/4/14 vue 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 elementui 按钮表单_前后端分离，文件上传下载（springBoot+vue+elementUI）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.介紹

本文主要是介紹前后端分離的上傳下載,后端使用的是SpringBoot,持久層用的是mybatis-plus,前端用的Vue,UI用的elementUI,測試了一下,文本,圖片,excel,都是可以上傳下載的,前端就是一個頁面,后端就是一個controller頁面,就可以解決

1.1前端樣子

2.前端

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

<template> ?<div> ? ?<center> ? ?center> ? ?<div style="float: left;margin-left: 100px"> ? ? ?<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 class="upload-demo" ? ? ? ? ? ? ? ? :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時使用。其中{ {CURRENT_USER} }表示當前用戶名， ? ? ?{ {TITLE} }表示表頭，{ {DATA} }表示數據行，{ {FOOTER} }表示頁腳區域。 ? ? 導出的內容不可改動，頁眉頁腳區域可以自由編輯。 ? ?el-form-item> ? ?<el-form-item > ? ? ?<el-select v-model="form.isPublic" style="width: 350px;"> ? ? ? ?<el-option label="私有查詢" value="2" >el-option> ? ? ? ?<el-option label="公共查詢" value="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 = 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 class="upload-demo" ? ? ? ? ? ? ? ? :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 上傳代碼

2.2.3下載代碼

下載代碼就是一個a標簽

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

2.3分享一下前端script代碼

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 = 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加上之前定義的路徑類和上傳方法就是

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

總結

以上是生活随笔為你收集整理的elementui 按钮表单_前后端分离，文件上传下载（springBoot+vue+elementUI）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： linux服务器监听服务sid_linu
下一篇： server多笔记录拼接字符串 sql_