★ 将File对象转换为URL的两种方式
| 方式一. URL.createObjectURL(object) 返回了一个DOMString包含了一个对象URL,该URL可用于指定源 object的内容。其参数为用于创建 URL 的File 对象、Blob 对象或者 MediaSource 对象。 |
| 方式二. FileReader.readAsDataURL(file) 读取指定的 Blob 或 File 对象,读取时触发onload事件,返回的结果中将是一个包含data:URL格式的字符串(base64编码)以表示所读取文件的内容。 |
★ 说明
| 这两种方法,参数都是blob对象或File 对象,返回一个可以用a标签打开的url,这两种方法都可用于下载文件。 |
★ 同步异步
| createObjectURL是同步执行 |
| FileReader.readAsDataURL是异步执行 |
★ 代码示例
方式一: URL.createObjectURL(object)
| imageUrl = URL.createObjectURL(blob对象或File 对象) |
方式二: FileReader.readAsDataURL(file)
| const reader = new FileReader() |
| reader.readAsDataURL(blob对象或File 对象) |
| reader.onload = () => { |
| imageUrl = reader.result |
| } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步