关于图片上传的一些功能点

关于图片上传的一些功能点

十月 28, 2021

前言

最近开发移动端编辑器的东西时,有一个需求是需要从手机拍照与从手机相册中选择图片。然后查了一下,遇到一个有点意思的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
2
3
4
5
6
7
var reader  = new FileReader();

reader.addEventListener("load", function () {
console.log('reader.result', reader.result)
}, false);

reader.readAsDataURL(file);

作用就是把一段输入的内容转换成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如何文件上传

暂无