前端上传和下载文件方案

最近接了一个需求，其中有一个小需求就是点击前端页面上按钮选择需要上传的文件并上传到指定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协议头访问时会让弹出输入用户名和密码的框，体验不好）

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

有任何问题欢迎留言，大家一起学习！

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