本文讲的图片上传,主要是针对上传头像的。大家都知道,上传头像一般都会分成以下 4 个步骤:
选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片
接下来,就详细的介绍每个步骤具体实现。
选择图片
选择图片有什么好讲的呢?不就一个 input[type=file]
,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的。
<input type="file" />
这时候,点击这个 input , 在 iOS 手机的显示如下:
其中的 “浏览” 选项,可以查看到非图片类型的文件,这并不是我们想要的结果,毕竟我们只想要图片类型。可以通过 accept
属性来实现,如下:
<input type="file" accept="image/*">
这样就可以过滤掉非图片类型了。但是图片的类型可能也太多了, 有些可能服务器不支持,所以,如果想保守一些,只允许 jpg
和 png
类型,可以写成这样:
<input type="file" accept="image/jpg, image/jpeg, image/png">
或:
<input type="file" accept=".jpg, .jpeg, .png">
OK, 过滤非图片的需求搞定了。但是有时候 ,产品还要求只能从摄像头采集图片,比如需要上传证件照,防止从网上随便找别人的证件上传,那capture
属性就可以派上用场了:
<input type="file" accept="image/*" capture>
这时候,就不能从文件系统中选择照片了,只能从摄像头采集。到了这一步,可能觉得很完美了,但是还有个问题,可能有些变态产品要求默认打开前置摄像头采集图片,比如就是想要你的自拍照片。 capture
默认调用的是后置摄像头。默认启用前置摄像头可以设置 capture="user"
,如下:
<input type="file" accept="image/*" capture="user">
好啦,关于选择图片的就讲么这么多了,有个注意的地方是,可能有些配置在兼容性上会有一些问题,所以需要在不同的机型上测试一下看看效果。
下面再来谈谈预览图片的实现。
预览图片
在远古时代,前端并没有预览图片的方法。当时的做法时,用户选择图片之后,立刻把图片上传到服务器,然后服务器返回远程图片的 url 给前端显示。这种方法略显麻烦,而且会浪费用户的流量,因为用户可能还没有确定要上传,你却已经上传了。幸好,远古时代已经离我们远去了,现代浏览器已经实现了前端预览图片的功能。常用的方法有两个,分别是 URL.createObjectURL()
和 FileReader
。虽然他们目前均处在 w3c 规范中的 Working Draft
阶段, 但是大多数的现代浏览器都已经良好的支持了。 下面就介绍一下如何使用这两个方法。
1. 使用 URL.createObjectURL 预览
URL.createObjectURL()
静态方法会创建一个 DOMString
,其中包含一个表示参数中给出的对象的 URL
。这个 URL
的生命周期和创建它的窗口中的 document
绑定。这个新的URL 对象表示指定的 File
对象或 Blob
对象。用法用下:
<objectURL = URL.createObjectURL(object);