Web API: URL.createObjectURL()实践

2023-11-06

1 问题

URL.createObjectURL的介绍如下:

The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.

必须注意的是这句话:

The URL lifetime is tied to the document in the window on which it was created.

也就是说,如果当时的document消失,比如页面被刷新,URL就失效了。

2 解决方案

为了解决这个问题,我用文件(图片)在服务器上的存储路径代替URL.createObject,前者(代码中的imageURL)是永久的,后者(代码中的img)是暂时的。

        this.imageUrl = URL.createObjectURL(file.raw); 
        this.img = `http://localhost:9111/${file.raw.name}`;

对的,我还另外运行了http-server,用于前端处理对图片的请求,其端口是9111,详见:https://stackoverflow.com/questions/16333790/node-js-quick-file-server-static-files-over-http

以上。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Web API: URL.createObjectURL()实践 的相关文章

  • Android高斯模糊(毛玻璃效果)蒙层库

    ShapeBlurView ShapeBlurView库是一个高斯模糊 毛玻璃效果 蒙层库 Like iOS UIVisualEffectView不知大家做需求的时候是否有这样的效果要求 需求示例 大家熟悉的Android常用图片加载库 比
  • 剑指 Offer 62. 圆圈中最后剩下的数字(leetcode)--约瑟夫问题

    文章目录 题目描述 算法 约瑟夫问题 算法描述 解决方案 普通解法 缺点 公式法 代码 题目描述 算法 约瑟夫问题 算法描述 约瑟夫问题是个著名的问题 N个人围成一圈 第一个人从1开始报数 报M的将被杀掉 下一个人接着从1开始报 如此反复

随机推荐

  • 该连接被站点断开怎么办_上网速度慢、掉线怎么办

    又到周末啦 休息的小伙伴可以在家里看看视频 玩玩手机 打打王者 彪彪飞车 但是网络突然出现网速慢掉线 电视看不了 游戏玩不了 怎么办呢 还要追剧呢 还要打团呢 还要飙车呢 好难过 别着急 小助手来帮你 上网速度慢怎么办 1 访问某个站点服务
  • [需求管理-11]:需求拆分常见的原则与方法

    目录 前言 第1章 需求拆分的原则 1 1 理解需要背后的客户价值 1 2 参考 用户故事的定义方法 1 3 系统需求的层次 1 4 需求拆分的INVEST原则 小而整 1 5 需求拆分的三个准则 一个用户 完整价值 不依赖 第2章 9 种
  • unity打飞碟

    unity hw4 1 编写一个简单的鼠标打飞碟 Hit UFO 游戏 游戏的演示视频地址 http v youku com v show id XMzU0Mjg0NDg3Mg html spm a2h3j 8428770 3416059
  • Python初学 Anaconda安装方法

    Anaconda 指的是一个开源的Python发行版本 其包含了Python conda等180多个科学包及其依赖项 conda是一个开源的包 环境管理器 可以用于在同一个机器上安装不同版本的软件包及其依赖 并能够在不同的环境之间切换 因为
  • 下载blob地址或m3u8格式视频方法以及常见问题解决

    STEP1 在一些视频播放网站视频下方没有直接的下载按钮 此时可以先用电脑F12键查看元素 会出现类似如下界面 STEP2 该界面左上角的位置有一个指针形状的按钮 选用这个按钮 点一下网页里视频播放的区域 审查元素界面会跳转到类似如下的界面
  • Pandas知识点-合并操作join

    Pandas知识点 合并操作join 在Pandas中 join 方法也可以用于实现合并操作 本文介绍join 方法的具体用法 一 基础合并操作 join other 将一个或多个DataFrame加入到当前DataFrame中 实现合并的
  • Redis基础

    文章目录 1 Redis入门 Redis简介 Redis下载与安装 Redis启动与停止 设置Redis密码和允许远程连接 2 Redis数据类型 3 Redis常用命令 字符串string操作命令 哈希hash操作命令 列表list操作命
  • Windows防止程序多开并在多开时弹出已运行程序

    Windows下防止程序多开并在多开时弹出已运行的程序 1 功能说明 在Windows客户端开发时 往往需要禁止客户多开程序的情况 并且在客户再次双击启动图标时显示已启动的程序界面 故而需要下面的功能 使用CreateMutex禁止程序多开
  • CNN网络,CNN+SVM网络对故障分类(python代码)

    1 数据集可以使用多种数据集验证 例如 CWRU PU IMS JNU SEU PHM2010等等 这里使用的是IMS 辛辛那提 正常 内圈故障 外圈故障 滚动体故障 原始数据下载官网 Prognostics Center of Excel
  • CentOS7 彻底清除MySQL

    MySQL完全删除 参考文档 http www centoscn com mysql 2017 0517 8791 html 查看已经安装的服务 rpm qa grep i mysql i 作用是不区分大小写 删除这两个服务 去掉后缀 rp
  • [思维模式-7]:《如何系统思考》-3- 认识篇 - 什么是系统?系统的特征?

    目录 第1章 什么是系统 1 1 万事万物都是一个有机的系统 1 2 系统的科学定义 1 3 系统的构成 1 4 系统的分类 第2章 动态复杂系统的八大特征 2 1 目的性 2 8 边界 2 3 结构影响行为 2 4 总体大于部分之和 2
  • 数据大屏适配方案 (scale)

    目录 适配方案分析 vw vh 什么是vw和vh vw和百分比的区别是什么 vw怎么使用 实现思路 案例 scale方案 一 scale 方法 1 scaleX x 2 scaleY y 3 scale x y 案例 大屏之关键 前期的自适
  • TemplateSyntaxError at /statistics/ ‘staticfiles‘ is not a registered tag li

    报错django template exceptions TemplateSyntaxError staticfiles is not a registered tag library Mustbe one of admin list ad
  • app基本控件

    一个完整的APP包括四大类 各种 栏 内容视图 控制元素 临时视图 各种 栏 状态栏 导航栏 标签栏 工具栏 搜索栏 范围栏 内容视图 列表视图 卡片视图 集合视图 图片视图 文本视图 控制元素 用于控制产品行为或显示的信息 临时视图 警告
  • IDEA设置启动选择项目

    IDEA设置启动选择项目 IDEA2019 3 5启动后自行选择项目 而不是进入上一次关闭的项目 通过下面的设置修改 将Reopen last project on startup勾选去除
  • 从零开始学Qt(四)信号与槽

    信号与槽 书不记 熟读可记 义不精 细思可精 1 信号 槽是啥 古有 烽火狼烟 传递消息 敌人来犯的消息迅速传达开来 是多么的聪慧啊 烟就是信号 下一个燃火台看到烟后就点燃燃料 这个就槽 换种方法说就是 一个按钮被点击了 会触发一个点击的信
  • 校园网连路由器

    1 校园网 并记住账号及其密码 2 一台电脑 Windows 系统 3 一台路由器 4 两条网线 准备完成 下面开始正式干活 第一步 电脑插上网线 路由器通电插上网线 在你的电脑登陆你的校园网 第二步 打开你的电脑搜索CMD 并以管理员权限
  • QString和QByteArray的区别

    QString和QByteArray的区别 本质 格式转换 QString字符串格式化打印 长度 本质 QString是对QByteArray的再次封装 QString可以通过char 来构造 也可以通过QByteArray来构造 QByt
  • CentripetalNet: Pursuing High-quality Keypoint Pairs for Object Detection解读

    摘要 基于关键点的检测器得到了不错的性能 但关键点匹配错误是普遍性存在的 严重的影响了其检测器的性能 作者通过centripetal shif将相同的类别的实例分开 CentripetalNet是预测角点的位置和向心偏移 通过向向心偏移来对
  • Web API: URL.createObjectURL()实践

    1 问题 URL createObjectURL的介绍如下 The URL createObjectURL static method creates a DOMString containing a URL representing th