前端上傳和下載文件方案

最近接了一個需求,其中有一個小需求就是點擊前端頁面上按鈕選擇需要上傳的文件并上傳到指定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: &quot;IBM Plex Mono&quot;; 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: &quot;IBM Plex Mono&quot;; 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協議頭訪問時會讓彈出輸入用戶名和密碼的框,體驗不好)

============================

有任何問題歡迎留言,大家一起學習!

============================

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 簡說Vue (組件庫) https://github.com/ElemeFE/element" 餓了么出品的VUE...
    Estrus丶閱讀 1,795評論 0 1
  • 基于Vue的一些資料 內容 UI組件 開發框架 實用庫 服務端 輔助工具 應用實例 Demo示例 element★...
    嘗了又嘗閱讀 1,171評論 0 1
  • UI組件 element- 餓了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的組件庫 m...
    小姜先森o0O閱讀 9,611評論 0 72
  • UI組件 element- 餓了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的組件庫 m...
    35eeabfa0772閱讀 3,287評論 7 12
  • UI組件 element - 餓了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的組...
    魯大師666閱讀 43,478評論 5 97