文件上传下载

文件上传介绍

文件上传，也称为upload，是指将本地图片、视频、音频等文件上传到服务器上，可以供其他用户浏览或下载的过程。

文件上传在项目中应用非常广泛，我们经常发微博、发微信朋友圈都用到了文件上传功能。

文件上传时，对页面的form表单有如下要求：

• method = "post" 采用post方式提交数据

• enctype = "multipart/form-data" 采用multipart格式上传文件

• type = "file" 采用input的file控件上传

举例

<form method = "post" action = "/common/upload" enctype = "multipart/form-data">
    <input name = "myfile" type = "file"/>
    <input type = "submit" value = "提交"/>
</form> 

目前一些前端组件库提供了相应的的上传组件，但是底层原理还是基于form表单的文件上传。

例如ElementUI中提供的upload上传组件：

服务端要接收客户端页面上传的文件，通常会使用Apache的两个组件：

• commons-fileupload

• commons-io

Spring框架在Spring-web包中对文件上传进行了封装，大大简化了服务端代码，我们只需要在Controller的方法中声明一个Multipartfile类型的参数即可接收上传的文件,例如：

文件下载介绍

文件下载，也称为download，是指将文件从服务器传输到本地计算机的过程。

通过浏览器进行文件下载，通常有两种表现形式：

• 以附件形式下载，弹出保存对话框，将文件保存到指定磁盘目录

• 直接在浏览器中打开、

通过浏览器进行文件下载，本质上就是服务端将文件以流的方式写回浏览器的过程。

文件上传代码实现

文件上传，页面端可以使用ElementUI提供的上传组件。

<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>