前端通过OSS地址下载文件

在开发中发现通过文件流下载录音文件会有问题,一直没有找到什么原因,索性换别的方法实现,这个方式是通过后端返回的阿里OSS文件地址使用fetch转成文件流的格式来下载,话不多说,上代码:

// row.fileAdd  文件地址   row.fileName  文件名称,需要加上文件后缀
fetch(row.fileAdd)
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', row.fileName+'.mp3');
    document.body.appendChild(link);
    link.click();
  })
  .catch(console.error);

忘记介绍Fetch Api

Fetch 是用于在 JavaScript 中进行网络请求的 API,旨在提供更简单、更灵活的方式来处理 HTTP 请求和响应。Fetch API 基于 Promise 设计,可以在浏览器端和 Node.js 环境下使用。

fetch 函数接受一个 URL 字符串作为参数,并返回一个 Promise 对象。在 Promise 实例被解决后,会返回一个代表响应的 Response 对象,它包含了 HTTP 响应的多种信息,比如状态码、头部、响应体等。

以下是一个简单的使用 fetch 函数获取 JSON 数据的示例:

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在这个示例中,fetch 函数获取了位于 https://example.com/data.json 的 JSON 数据,并通过 response.json() 将 Response 对象转换为 JavaScript 对象(如果响应不是 JSON 格式,可以使用其他方法进行转换)。然后将获取到的数据输出到控制台上。

fetch 函数还提供了其他参数选项,比如 method、headers、body 等,可以根据具体需求进行配置。此外,fetch 函数默认情况下不会携带 cookies 和其他认证信息,需要手动设置 credentials 选项来控制是否携带这些信息。

需要注意的是,fetch 函数并不是万能的,这是因为一些历史原因仍然需要使用 XMLHTTPRequest 和 Ajax 进行网络请求。另外,fetch 函数在处理跨域请求时也有一些限制,需要进行 CORS 配置才能正常使用。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值