使用fetch请求,根据图片的地址获取其对应的File对象

2023-12-20 00:08:11

在浏览器环境中,fetch是一个全局对象,因此不需要显式引入它就可以使用,

fetch是用于发送网络请求并获取响应的现代API,它返回一个 Promise 对象,可以异步获取到网络资源的响应,

因此,可以在浏览器环境中直接使用 fetch方法 来获取网络资源的数据,而不需要显式引入它。


从 图片地址 获取到图片的二进制数据,并创建对应的File对象

	imgSrc:一个网络图片的地址

	// 使用 fetch 方法向获取到的图片地址发送 GET 请求,以获取图片的二进制数据。
	/*
		使用 then 方法处理 fetch 返回的 Promise 对象,第一个 then 方法将响应对象转换为一个 Blob 对象,以便后续使用,
		在第二个 then 方法中,使用获取到的 Blob 对象创建了一个 File 对象,
		
		File构造函数接受三个参数:
			文件数据(这里是图片的二进制数据)
			文件名('123.png')
			一个包含文件元数据的对象(指定文件类型为'image/png',并设置最后修改时间为当前时间)
	*/
	fetch(imgSrc).then(res => res.blob()).then(blob => {
		// 这样,就从图片地址获取到图片的二进制数据,并创建对应的File对象,这些`File对象`可以上传到服务器或者存储到本地等
		let myFile = new File([blob], '123.png', {type: 'image/png', lastModified: Date.now()})
	})


fetch 是一个用于发送网络请求并获取响应的现代 API,它提供了一种更简洁和灵活的方式来进行网络通信。

fetch 方法返回一个 Promise 对象,可以异步获取到网络资源的响应。

以下是 fetch 的一些特点和用法:

1. 简洁的API:fetch 提供了一个简洁的 API,可以使用它发送各种类型的网络请求(GET、POST、PUT、DELETE 等)。

2. Promise-based:fetch 返回一个 Promise 对象,可以使用 then 方法处理获取到的响应数据,使得网络请求可以更容易地进行异步处理。

3. 支持跨域请求:fetch 默认支持跨域请求,可以从其他域发送请求并获取响应。

4. 支持流式传输:fetch 支持通过流式传输获取响应数据,可以使用 response.body 属性来获取响应的数据流。

5. 可定制性:fetch 提供了丰富的配置选项,可以自定义请求头、请求方法、请求体等。
使用 fetch 方法发送网络请求的基本语法如下:

fetch(url, options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  })

url:要发送请求的 URL 地址
options:是一个可选的配置对象,用于指定请求的参数,比如请求方法、请求头、请求体等

fetch 方法返回一个 Promise 对象,可以使用 then 方法处理获取到的响应数据,也可以使用 catch 方法处理请求过程中的错误。

文章来源:https://blog.csdn.net/pig_ning/article/details/135084815
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。