上传图片文件

作者：李光辉

撰写时间：2019.5.16

很多情况下我们需要对某些页面添加图片文件，例如一些图片的浏览、身份信息的录入等等，在用户的眼中上传图片是非常简单的操作，点击新增图片的地方，选择需要的图片文件就能够新增进去。然而在我们程序猿眼里，上传图片文件得需要一系列的判断和编码，可没有想象中的那么简单。（例：↓）

首先是控制器的代码部分，声明一个byte 来保存新增的图片，然后开始判断图片文件是否为空。

然后初始化数组的长度，同时为了内存节省空间，长度由实际上传的图片的长度决定，最后读取该
图片文件，将图片转为内存流 结束位置，将流读取为byte[ ]（页面传来的图片的名称不要跟数据库的名称一致）

注：参数：byte[]，读取开始位置，读取字节数

然后就是视图部分的代码编写了，相对控制器的代码来说较为复杂许多，那么将选择的图片显示出来的呢？

我们需要通过文件获取的接口来获取选择的图片并显示出来，同时接口提供了一个异步的API，通过这个API可以从浏览器中异步访问文件系统中的数据。因此，FileReader接口可以读取文件中的数据，并将读取的数据放入到内存中去

然后我们进行选择照片，实质上就是用FileReader对象来读取本地数据，并且将数据结果赋值给image的src

对于input文件选择控件，Bootstrap v4采用.form-control-file 。首先写打开file表单的方法，选择需要添加的图片

然后需要创建一个FileReader对象，同时为了防止选择的文件不是图片的格式，我们需要通过正则表达式判断，过滤图片文件避免其他类型文件。

下面是file表单的改变事件，根据选择到的图片文件判断上传文件是否为图片格式，将选择的图片显示到img元素，

readAsDataURL( )方法可以获取API异步读取的文件数据，另存为数据URL。

注：FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术，可以将资料(例如图片)内嵌在网页之中，不用放到外部文件。

最后在我们读取文件内容的时候，使用onload事件，尽可能避免误操作

将该URL绑定到img标签的src属性上，就可以实现图片的上传预览效果了。