Day11-02.案例-文件上传-简介

Day11-02.案例-文件上传-简介

1.文件上传简介：

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

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

2.前端程序实现文件上传：(文件上传前端页面三要素)

前端程序要想实现文件上传，就不得不提到文件上传前端页面的三要素。

1.第一要素：(必须要有一个表单项file)

前端要想进行文件上传，必须要定义一个form表单，并且在表单当中要定义一个表单项，他的类型为file，这个表单最终在页面当中的体现形式就是一个按钮(叫选择文件或者叫浏览)，点击这个按钮就会弹出一个窗口，就可以来选择我们要上传的本地文件了。

2.第二要素：(表单提交方式为POST)

表单的提交方式必须为POST方式，因为我们要进行文件上传，这些文件一般都会比较大，所以用POST提交方式。

3.第三要素：(一定设置表单的编码格式为multipart/form-data)

在form表单当中，我们需要通过enctype这个属性来指定表单的编码格式为multipart/form-data，因为普通默认的编码格式是不适合传输大型的二进制数据的，所以在进行文件上传的时候，表单的编码格式必须设置为multipart/form-data。如果表单的编码格式使用的是默认值application/x-www-form-urlencoded，此时提交的仅仅是这个文件的文件名，文件里面的内容没有提交到服务端。

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7LtTOZCv7d2xr7lM

在这个请求头后面有一个参数boundary，是一个分隔符。如果说我们将表单当中的enctype属性设置为multipart/form-data，那此时表单数据在提交的时候是分为多个部分的，每一个表单项就是一个单独的部分，而多个部分之间会使用浏览器自动生成的boundary分隔符来进行分隔。最终在提交的时候，文件的名字文件的内容都会提交到服务端。

说明：现在我们进行测试的时候，上传的是一个文本文件，如果说上传的是一张图片，或者是一个视频音频，最终是看不到这些文字的，最终可能是一些乱码，因为他们都是二进制的文件。

一旦将表单的编码格式设置为multipart/form-data，那此时表单的数据在提交时，将会分为多个部分进行提交。而此时普通的表单数据，像name和age可以正常提交，而我们上传的文件也可以正常提交，上传的文件不仅将原始的文件名提交到服务端，文件的内容也会提交到服务端。

    //action：表单往哪提交？ method：表单提交方式？ enctype：表单的编码格式
    <form action="/upload" method="post" enctype="multipart/form-data">
        姓名: <input type="text" name="username"><br>
        年龄: <input type="text" name="age"><br>
        头像: <input type="file" name="image"><br>
        <input type="submit" value="提交">
    </form>

3.服务端接收文件：

首先在服务端定义一个Controller用来进行文件上传，在Controller中定义一个方法来处理/upload这个请求。

1.怎么接收提交过来的数据？

​ 首先是普通的表单项，之前怎么接收现在就怎么接收(直接在方法中声明形参，可以声明一个String类型的username，Integer类型的age，

这样就可以接收到普通类型的表单项)。

​ 提交上来的文件服务端怎么接收：在spring当中，给我们提供了一个API，叫做MultipartFile，通过这个API就可以接收到上传上来的文件，

而要想成功的接收到上传上来的文件，我们必须保证这个表单项的名称必须要和方法形参的名称保持一致，这样就可以成功接收了。

如果说表单项的名称和方法形参的名称不一致，可以通过注解@RequestParam手动映射，@RequestParam当中所指定的value这个属性就是前端所传递的参数名。

记得访问路径后面加上.html

4.小结：

1.前端页面三要素：

​ 1.表单项type=“file”

​ 2.表单提交方式post

​ 3.表单的enctype属性multipart/form-data

2.服务端接收文件：

​ 1.MultipartFile(通过这个API上传上来的文件是一个临时文件，而当我们文件上传这次请求响应完毕之后，这个临时文件会自动删除)