关于图片上传的一些功能点
前言
最近开发移动端编辑器的东西时,有一个需求是需要从手机拍照与从手机相册中选择图片。然后查了一下,遇到一个有点意思的URI.createObjectURL方法,可以把选择的图片转换为一个内存地址,这个地址可以预览,且同步执行,非常快。。觉得有点意思。所以打算写一篇文章记录一下。
正文
关于input标签的capture属性
在了解浏览器打开手机摄像头时,了解到,input标签上传文件时,accept配合capture可以直接打开摄像头
<input type="file" accept="image/*" capture />
MDN上说,capture可以配合accept="image/*"
、accept="video/*"
、accept="audio/*"
分别捕获照片、视频与音频。但经测试。只有视频与图片可用。
capture的值可以是user和environment。分别是面向用户
的设备(摄像头或麦克风)和面向环境
的设备。但亲测无效。应该存在不小的兼容性问题。
不过,只是唤起前后摄像头是没毛病的。
URI.createObjectURL与FileReader.readAsDataURL
在input标签获取到内容后,需要反显到页面上,有两种办法。
URI.createObjectURL
可以接受File对象、Blob对象、MediaSource对象作为参数,返回一个对象URL。
这个对象URL是这样的一个东西:blob:http://192.168.30.66:3000/faeef5ab-9cfd-4d6d-97f9-6d675a131471
这是一段内存地址,该地址指向保存在内存中的图片,并且关联在当前页面上
。
如需清除掉内存中的内容,1是关闭此浏览器tab,2是调用URL.revokeObjectURL
手动清除
亲测,生成的URL可以在同一浏览器的另一个tab
中打开。不同浏览器
中无法打开。且,如果创建url地址的页面关闭
后,此url地址将失效。
FileReader.readAsDataURL
此方法接受Blob对象
或者File对象
。返回一段base64.
此方法是异步的,需要监听load事件来获取返回值。
1 | var reader = new FileReader(); |
作用就是把一段输入的内容转换成base64.
区别
还有一个重要的区别是,FileReader.readAsDataURL输出的base64会占用V8内存
,需要GC来回收内存。而URI.createObjectURL只会占用系统内存
。这也是比较值得注意的地方。
URI.createObjectURL
- 接受参数有File、Blob、MediaSource
- 同步
- 数据存储在系统内存
- 需要关掉tab或者手动清除内存
FileReader.readAsDataURL
- 接受参数有File、Blob
- 异步
- 数据存储在V8内存
- GC回收
FileReader对象与input标签的file对象
FileReader是一个允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
File对象来自input标签、拖拽产生的DataTransfer对象、Canvas。
File来自FileList对象,而FileList对象通常来自input标签的file属性。就这样。
FileReader.readAsDataURL的兄弟们
接口都一样,只是返回的数据不一样
- readAsArrayBuffer: 返回ArrayBuffer,也就是数组二进制
- readAsBinaryString: 返回原始二进制
- readAsDataURL: 返回base64
- readAsText: 返回文本。读取文本文件可以直接拿到文本值
文件上传
前端代码
暂无
文件上传的node代码
暂无
http如何文件上传
暂无