RL也被称为网址。

URL 可以由单词组成,比如 "w3school.com.cn"，或者是因特网协议(IP)地址：192.168.1.253。

大多数人在网上冲浪时,会键入网址的域名,因为名称比数字容易记忆。

URL(Uniform Resource Locator)

当您点击 HTML 页面中的某个链接时,对应的<a>标签指向万维网上的一个地址。

统一资源定位器(URL)用于定位万维网上的文档(或其他数据)。

网址,比如 http://www.w3school.com.cn/html/index.asp,遵守以下的语法规则：

scheme://host.domain:port/path/filename

解释：

scheme 定义因特网服务的类型。最常见的类型是 http

host 定义域主机(http 的默认主机是 www)

domain 定义因特网域名，比如 w3school.com.cn

:port 定义主机上的端口号(http 的默认端口号是 80)

path 定义服务器上的路径(如果省略，则文档必须位于网站的根目录中)。

filename 定义文档/资源的名称

编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为"统一资源定位符"。

URL Schemes

以下是其中一些最流行的 scheme：

Scheme 访问 用于...

http 超文本传输协议 以 http:// 开头的普通网页。不加密。

https 安全超文本传输协议 安全网页。加密所有信息交换。

ftp 文件传输协议 用于将文件下载或上传至网站。

file 您计算机上的文件。

URL编码

URL只能使用ASCII字符集来通过因特网进行发送。

由于URL常常会包含ASCII集合之外的字符,URL 必须转换为有效的ASCII格式。

URL编码使用"%"其后跟随两位的十六进制数来替换非ASCII字符。

URL不能包含空格。URL编码通常使用+来替换空格。

URL编码表参考

http://www.w3school.com.cn/tags/html_ref_urlencode.html

端功能问题系列文章，点击上方合集↑

序言

大家好，我是大澈！

本文约2100+字，整篇阅读大约需要3分钟。

本文主要内容分三部分，如果您只需要解决问题，请阅读第一、二部分即可。如果您有更多时间，进一步学习问题相关知识点，请阅读至第三部分。

感谢关注微信公众号：“程序员大澈”，然后加入问答群，从此让解决问题的你不再孤单！

RL.createObjectURL() 是 JavaScript 中的一个方法，用于创建一个特殊的 URL，该 URL 可以用于将不支持直接加载的数据（如二进制数据或 Blob 对象）嵌入到 web 页面中。这个方法通常用于将文件或数据转换成可供浏览器加载的 URL。

语法

const objectURL = URL.createObjectURL(object);

参数

object：要创建 URL 的对象，通常是一个 Blob 对象或一个 File 对象。

返回值

objectURL：一个字符串，表示创建的 URL。这个 URL 可以被用作图像、音频、视频等多媒体元素的 src 属性，或者作为超链接的 href 属性。

用途:

• 用于在 web 页面上显示二进制数据，如图片、音频、视频等。
• 可用于预览用户上传的文件，不必将文件上传到服务器。
• 可用于处理客户端生成的数据，如绘制到 <canvas> 元素后创建 URL 以供下载。

示例

// 创建一个 Blob 对象
const blob = new Blob(['Hello, world!'], { type: 'text/plain' });

// 使用 URL.createObjectURL 创建一个可用于展示 Blob 数据的 URL
const objectURL = URL.createObjectURL(blob);

// 在页面上展示这个 URL
const imageElement = document.createElement('img');
imageElement.src = objectURL;
document.body.appendChild(imageElement);

// 一旦不再需要，可以通过调用 URL.revokeObjectURL() 来释放资源
URL.revokeObjectURL(objectURL);

下载文件

// 创建一个按钮来触发保存文件操作
const saveButton = document.createElement('button');
saveButton.textContent = '保存文件';
document.body.appendChild(saveButton);

// 创建文本数据
const textData = '这是要保存的文本数据';

// 创建一个 Blob 对象，将文本数据放入其中
const blob = new Blob([textData], { type: 'text/plain' });

// 创建一个链接元素，允许用户下载文件
const downloadLink = document.createElement('a');
downloadLink.textContent = '下载文件';
downloadLink.style.display = 'none'; // 隐藏链接
downloadLink.href = URL.createObjectURL(blob);
downloadLink.download = 'myFile.txt'; // 指定下载时的文件名

// 添加链接到文档
document.body.appendChild(downloadLink);

// 添加点击事件监听器，以触发下载
saveButton.addEventListener('click', function() {
  downloadLink.click();
});

// 在不再需要时，释放资源
downloadLink.addEventListener('click', function() {
  URL.revokeObjectURL(downloadLink.href);
});

注意事项

• 创建的 URL 在使用后应该通过 URL.revokeObjectURL() 进行释放，以释放浏览器资源。
• 不同浏览器可能对支持的对象类型和 MIME 类型有所不同，因此在使用之前最好检查浏览器的兼容性。

总结

URL.createObjectURL() 是一个有用的方法，可用于在 web 页面中处理二进制数据和文件，使其能够以 URL 的形式在页面上展示。