vue3+ts+ant 下载视频并转化视频格式(需要后端配合)

一个天蝎女程序员的日常

已于 2024-04-25 16:57:11 修改

阅读量125

点赞数 3

文章标签： vue.js javascript 前端前端框架

于 2024-04-25 16:49:32 首次发布

本文链接：https://blog.csdn.net/zwycindy/article/details/138193539

版权

vue3+ts+ant下载方法的书写
话不多说直接上代码
template

<a-button danger @click="editFun(record.id)">剪辑并下载</a-button>

<script setup lang="ts">
const editFun = async () => {
    let params = {
      id: state.videoId,
    };
    if (state.startSecond != 0 && state.endSecond != 0) {
      params['clip'] = {
        startSecond: state.startSecond,
        endSecond: state.endSecond,
      };
    }
    if (state.width != 0 && state.height != 0) {
      params['resizer'] = {
        width: state.width,
        height: state.height,
      };
    }
    if (state.format != '') {
      params['transcoding'] = {
        format: state.format,
      };
    }
    let res: any = await videoApi.videoDown(params);
    //videoApi.videoDown 在上传文章里api/video.ts 已写
    // 创建一个下载链接并模拟点击以下载文件
    const url = window.URL.createObjectURL(new Blob([res.data]));
    const link: any = document.createElement('a');
    link.href = url;
    link.setAttribute(
      'download',
      decodeURIComponent(res.headers['content-disposition'].split('=')[1]),
    ); // 文件名
    document.body.appendChild(link);
    link.click();
    link.parentNode.removeChild(link);
    window.URL.revokeObjectURL(url);
  };
 </script>