最近接了一個需求，其中有一個小需求就是點擊前端頁面上按鈕選擇需要上傳的文件并上傳到指定FTP服務器，再點擊某個按鈕直接可以下載此文件。
涉及到的技術范疇：vue、element-ui、springboot、mysql
涉及到的工具：WebStorm、Eclipse、Navicat for MySQL、FilleZilla（這是一個ftp工具，可以直接登錄ftp服務器，并直接操作ftp服務器上文件，使用它可以手動發布前端版本）
需求已經了解清楚了，接下來我們把實現邏輯大概梳理下。
先上流程圖：
image
再上代碼：
(1)前端代碼：
<pre style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; background-color: rgb(43, 43, 43); color: rgb(169, 183, 198); font-family: "IBM Plex Mono"; font-size: 12pt;"><el-upload
class="upload-demo"
action="這里填寫后端接口地址"
:on-success="handleSuccess"
:limit="1"
:on-exceed="handleExceed">
<el-button size="small" type="primary">點擊上傳</el-button> </el-upload></pre>
(2)后端代碼：
Controller：
<pre style="margin: 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; overflow-wrap: break-word !important; background-color: rgb(43, 43, 43); color: rgb(169, 183, 198); font-family: "IBM Plex Mono"; font-size: 12pt;">@PostMapping(value = "/importFifle")
public JSONObject importFifle(@RequestParam("file")
MultipartFile file)</pre>
總得來說注意幾點就OK了：
(1)前端Vue使用element-ui的上傳組件el-upload，這個直接參考element-ui官網，使用方法很詳細。
(2)在后端springboot工程中寫好上面上傳文件的Controller接口
(3)在組件el-upload中加入action屬性對應的值為：springboot工程的項目名稱+接口名稱
(4)前端使用<a>標簽傳入上傳文件后的url給href屬性
(5)FTP服務器上的資源可以通過配置支持HTTP協議頭訪問（這里通過ftp協議頭訪問時會讓彈出輸入用戶名和密碼的框，體驗不好）
============================
有任何問題歡迎留言，大家一起學習！
============================
