使用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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!