vue3+ts 如何下载上传华为云的数据

꧁“杂货店”꧂

已于 2024-07-24 09:16:04 修改

阅读量449

点赞数

文章标签：华为云 javascript 前端

于 2022-12-05 10:09:19 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45287575/article/details/128181818

版权

在处理华为云上文件的下载时，发现常规的base64或blob转换方法会导致视频文件损坏或只能在线预览。解决办法是在华为云URL后添加参数以指定下载，因华为云URL的content-type为application/octet-stream。通过封装方法，可以方便地在Vue3+TS项目中调用，实现文件的正常下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一。网上大多都是说把response的数据转换为base64或是blob转换url到a标签中进行下载。但是在华为云上的文件，上面的操作是视频文件是直接下载，但是显示文件损坏。或者就是在线预览。其实可以在华为云的url链接后面上一个

?response-content-type=application/octet-stream`

这样就可以让浏览器知道是要下载文件
因为华为云url链接的返回体类型就是content-type=application/octet-stream

封装为方法

export function downloadByUrlAndZdy({ url, target = '_blank', fileName }) {
  if (/(iP)/g.test(window.navigator.userAgent)) {
    console.error('Your browser does not support download!');
    return false;
  }
  const link = document.createElement('a');
  link.href = url + `?response-content-type=application/octet-stream`;
  link.target = target;
  link.download = fileName;
  document.body.appendChild(link);
  if (document.createEvent) {
    const e = document.createEvent('MouseEvents');
    e.initEvent('click', true, true);
    link.dispatchEvent(e);
  }
  document.body.removeChild(link);
}

调用

       /**
       *
       * @param url 下载方法
       */
      async function handleClick(val) {
        let url = val.url;
        let fileName = val.fileName + '.' + val.suffix;
        downloadByUrlAndZdy({ url, fileName });
      }

el-button调用

<el-button type="primary" class="button" @click="handleClick(item)" link>下载</el-button>

完毕！