#Js篇：BlobFile对象URL.createObjectURL()fetchlocationnavigatornew URl-海口c网

#Js篇：BlobFile对象URL.createObjectURL()fetchlocationnavigatornew URl

article/2025/8/2 23:07:23

Blob

在 JavaScript 中，Blob 是一个非常重要的对象，用于表示不可变的、原始的二进制数据块（Binary Large Object）

arrayBuffer()：获取 Blob 的二进制数据作为 ArrayBuffer。
stream()：创建一个可读流，以便逐步读取 Blob 内容。
text()：将 Blob 转换为文本字符串。
slice()：分割 Blob，生成新的 Blob 对象。

File 对象

属性
name 文件名称（不包括路径）
lastModified 文件最后修改的时间戳（毫秒）
size 文件大小（字节）
type 文件的 MIME 类型

定义
它扩展自 Blob（Binary Large Object），因此拥有所有 Blob 的方法和属性，并且还提供了一些额外的信息，比如文件名、最后修改时间等。File 对象通常与元素一起使用，允许用户从本地文件系统中选择文件。

创建的过程分为
一：用户选择文件创建 File 对象：

二：手动创建 File 对象：

const content = new Blob(['Hello, world!'], { type: 'text/plain' });
const file = new File([content], "hello.txt", { type: "text/plain" });
console.log(file.name); // 输出: hello.txt

总之，File 对象是处理用户选择文件的核心工具，在文件上传、预览、读取等场景中扮演着重要角色。通过结合 FileReader、FormData 和其他相关 API，开发者能够实现丰富的文件处理功能。

URL.createObjectURL()

URL.createObjectURL() 是 JavaScript 提供的 Web API，用于为 Blob 或 File 对象创建一个唯一的临时 URL。这个 URL 可以像普通 URL 一样使用，但指向的是浏览器内存中的对象。

Blob URL 是浏览器内部的私有引用，替换域名无效，跨页面也无效。你应该将文件内容转换为 Base64 字符串或先上传服务器再传 fileId 给目标页面。

一个典型的 blob URL 是这样的
blob:http://example.com/4e7defd0-f9b5-4e53-a08c-cb82c1d0f6dd

它只是浏览器内存中的一个映射；
只有创建它的那个页面才能访问它。

blob: 协议头，表示这是一个 blob URL
http://example.com/ 创建该 blob URL 的文档的源（origin），用于安全隔离
4e7defd0-… 浏览器为这个 Blob 分配的唯一标识符

主要用途

生成文件预览：例如显示用户选择的图片或视频。
下载文件：创建一个临时的下载链接让用户可以下载由程序动态生成的内容（如文本文件、JSON 数据等）。
音频/视频播放：直接从 Blob 或 File 对象中读取并播放多媒体内容。

示例

const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
console.log(url); // 输出类似 "blob:http://example.com/4e7defd0-f9b5-4e53-a08c-cb82c1d0f6dd"

对象URL的有效期：对象URL仅在其创建的文档存在期间有效。一旦文档被卸载（即用户离开页面），所有通过 URL.createObjectURL() 创建的URL都会失效。
释放对象URL：为了防止内存泄漏，当你不再需要使用对象URL时，应该调用 URL.revokeObjectURL() 方法来释放它。这告诉浏览器它可以安全地清除与该URL关联的资源。

const url = URL.createObjectURL(blob);
// 使用url...
URL.revokeObjectURL(url); // 当你确定不再需要使用这个URL时调用

fetch()

定义

fetch() 是现代浏览器中用于发起网络请求（如 HTTP 请求）的内置 API，常用于从服务器获取或发送数据。它比传统的 XMLHttpRequest 更加简洁、强大，并且基于 Promise，支持异步编程。

fetch(url, options).then(response => response.json()) // 或 text(), blob() 等.then(data => console.log(data)).catch(error => console.error('Error:', error));

参数说明

url String 要请求的资源地址（如：https://api.example.com/data）
options Object 可选参数，包括请求方法、头部、请求体等

fetch('https://api.example.com/data', {method: 'GET', // 或 POST、PUT、DELETE 等headers: {'Content-Type': 'application/json',// 其他 header 如 Authorization},body: JSON.stringify({ key: 'value' }), // 仅 POST/PUT 等需要mode: 'cors', // 或 no-cors, same-origincache: 'no-cache', // 缓存策略credentials: 'include' // 是否携带 cookie（跨域时需后端允许）
})

fetch() 返回一个 Promise，它解析为一个 Response 对象。你需要使用以下方法提取响应内容

方法说明示例
.json() 将响应解析为 JSON 对象 response.json()
.text() 将响应解析为字符串 response.text()
.blob() 获取二进制内容（如图片、文件） response.blob()
.arrayBuffer() 获取原始二进制数据 response.arrayBuffer()
.formData() 获取 multipart/form-data 数据 response.formData()

请求示例

get

fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error fetching data:', error));

post

fetch('https://jsonplaceholder.typicode.com/posts', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({title: 'foo',body: 'bar',userId: 1})
}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error posting data:', error));

window.location

常用

属性	示例值	描述
`href`	`"https://example.com/path?q=test"`	完整URL
`origin`	`"https://example.com"`	协议+域名+端口
`protocol`	`"https:"`	协议（含冒号）
`host`	`"example.com:8080"`	域名+端口
`hostname`	`"example.com"`	域名（不含端口）
`port`	`"8080"`	端口号
`pathname`	`"/path"`	URL路径部分
`search`	`"?q=test"`	查询字符串（含问号）
`hash`	`"#section"`	锚点标识（含井号）

// 常规跳转（可回退）
window.location.assign("/new-page");// 替换当前页（不可回退）
window.location.replace("/login");// 带缓存的刷新
window.location.reload();// 强制刷新（Ctrl+F5效果）
window.location.reload(true);

navigator

属性	说明	示例值
`userAgent`	浏览器用户代理字符串	`"Mozilla/5.0 (Windows NT 10.0)"`
`appVersion`	浏览器版本信息	`"5.0 (Windows)"`
`platform`	操作系统平台	`"Win32"`
`vendor`	浏览器供应商	`"Google Inc."`

new URLSearchParams()

定义

URLSearchParams 是 JavaScript 提供的用于处理 URL 查询字符串的 API

操作

// 从完整 URL 中提取查询参数
const url = new URL('https://example.com/path?param1=value1&param2=value2');
const params = new URLSearchParams(url.search);const name = params.get('name'); // "李四"（获取第一个值）
const cities = params.getAll('city'); // ["北京", "上海"]（获取所有同名值）const hasName = params.has('name'); // true

new URL()

定义

new URL() 是 JavaScript 中用于创建 URL 对象的构造函数。它允许你以编程方式构建、解析和操作 URL 字符串。URL 对象提供了一系列属性和方法来访问和修改 URL 的各个部分，比如协议、主机名、路径等。

示例

// 获取url
const url = new URL('https://user:pass@sub.example.com:8080/p/a/t/h?query=string#hash');
console.log(url.protocol); // "https:"
console.log(url.username); // "user"
console.log(url.password); // "pass"
console.log(url.hostname); // "sub.example.com"
console.log(url.port);     // "8080"
console.log(url.pathname); // "/p/a/t/h"
console.log(url.search);   // "?query=string"
console.log(url.hash);     // "#hash"// 基本路径解析相对路径
const baseUrl = 'https://example.com/path/';
const relativeUrl = './sub/path?query=123';
const absoluteUrl = new URL(relativeUrl, baseUrl);
console.log(absoluteUrl.href); // "https://example.com/path/sub/path?query=123"// 添加修改
const url = new URL('https://example.com/path?param1=value1&param2=value2');
// 获取查询参数对象
const params = new URLSearchParams(url.search);
// 添加或修改参数
params.set('param1', 'newValue1');
params.append('param3', 'value3'); // 添加新参数
// 应用到 URL
url.search = params.toString();
console.log(url.href); // "https://example.com/path?param1=newValue1&param2=value2&param3=value3"