Spring Boot + Vue 前后端分离,两种文件上传方式总结
在Vue.js 中,如果網絡請求使用 axios ,并且使用了 ElementUI 庫,那么一般來說,文件上傳有兩種不同的實現方案:
兩種方案,各有優缺點,我們分別來看。
準備工作
首先我們需要一點點準備工作,就是在后端提供一個文件上傳接口,這是一個普通的 Spring Boot 項目,如下:
SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/"); ("/import") public RespBean importData(MultipartFile file, HttpServletRequest req) throws IOException {String format = sdf.format(new Date());String realPath = req.getServletContext().getRealPath("/upload") + format;File folder = new File(realPath);if (!folder.exists()) {folder.mkdirs();}String oldName = file.getOriginalFilename();String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf("."));file.transferTo(new File(folder,newName));String url = req.getScheme() + "://" + req.getServerName() + ":" + req.getServerPort() + "/upload" + format + newName;System.out.println(url);return RespBean.ok("上傳成功!"); } 復制代碼這里的文件上傳比較簡單,上傳的文件按照日期進行歸類,使用 UUID 給文件重命名。
這里為了簡化代碼,我省略掉了異常捕獲,上傳結果直接返回成功,后端代碼大伙可根據自己的實際情況自行修改。
Ajax 上傳
在 Vue 中,通過 Ajax 實現文件上傳,方案和傳統 Ajax 實現文件上傳基本上是一致的,唯一不同的是查找元素的方式。
<input type="file" ref="myfile"> <el-button @click="importData" type="success" size="mini" icon="el-icon-upload2">導入數據</el-button> 復制代碼在這里,首先提供一個文件導入 input 組件,再來一個導入按鈕,在導入按鈕的事件中來完成導入的邏輯。
importData() {let myfile = this.$refs.myfile;let files = myfile.files;let file = files[0];var formData = new FormData();formData.append("file", file);this.uploadFileRequest("/system/basic/jl/import",formData).then(resp=>{if (resp) {console.log(resp);}}) } 復制代碼關于這段上傳核心邏輯,解釋如下:
這種文件上傳方式,實際上就是傳統的 Ajax 上傳文件,和大家常見的 jQuery 中寫法不同的是,這里元素查找的方式不一樣(實際上元素查找也可以按照JavaScript 中原本的寫法來實現),其他寫法一模一樣。這種方式是一個通用的方式,和使用哪一種前端框架無關。最后再和大家來看下封裝的上傳方法:
export const uploadFileRequest = (url, params) => {return axios({method: 'post',url: `${base}${url}`,data: params,headers: {'Content-Type': 'multipart/form-data'}}); } 復制代碼經過這幾步的配置后,前端就算上傳完成了,可以進行文件上傳了。
使用 Upload 組件
如果使用 Upload ,則需要引入 ElementUI,所以一般建議,如果使用了 ElementUI 做 UI 控件的話,則可以考慮使用 Upload 組件來實現文件上傳,如果沒有使用 ElementUI 的話,則不建議使用 Upload 組件,至于其他的 UI 控件,各自都有自己的文件上傳組件,具體使用可以參考各自文檔。
<el-uploadstyle="display: inline":show-file-list="false":on-success="onSuccess":on-error="onError":before-upload="beforeUpload"action="/system/basic/jl/import"><el-button size="mini" type="success" :disabled="!enabledUploadBtn" :icon="uploadBtnIcon">{{btnText}}</el-button> </el-upload> 復制代碼相應的回調如下:
onSuccess(response, file, fileList) {this.enabledUploadBtn = true;this.uploadBtnIcon = 'el-icon-upload2';this.btnText = '數據導入'; }, onError(err, file, fileList) {this.enabledUploadBtn = true;this.uploadBtnIcon = 'el-icon-upload2';this.btnText = '數據導入'; }, beforeUpload(file) {this.enabledUploadBtn = false;this.uploadBtnIcon = 'el-icon-loading';this.btnText = '正在導入'; } 復制代碼上傳效果圖如下:
總結
兩種上傳方式各有優缺點:
關注公眾號牧碼小子,專注于 Spring Boot+微服務,定期視頻教程分享,關注后回復 Java ,領取松哥為你精心準備的 Java 干貨!
轉載于:https://juejin.im/post/5cc518186fb9a03234165172
總結
以上是生活随笔為你收集整理的Spring Boot + Vue 前后端分离,两种文件上传方式总结的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: typescript 接口 inter
- 下一篇: Vue和其他框架的区别