vue 视频上传

本文介绍在Vue+TS环境下如何实现视频上传功能,利用阿里云的视频点播服务。首先,需要后端获取API和访问控制的token,然后前端使用此token调用阿里云存储接口进行视频上传。
摘要由CSDN通过智能技术生成

环境:vue + TS 上传视频 + 上传到阿里云
主要处理前端在vue下上传视频

使用的是阿里云的视频点播服务

  1. 需要后台去申请一个开发API,请求阿里云的接口访问控制
  2. 有了开发视频的token,供给前端
  3. 前端去请求阿里云存储

在这里插入图片描述
video.vue

<template>
  <div class="container">
    <el-card>
      <div slot="header">
        <div>课程:</div>
        <div>阶段:</div>
        <div>课时:</div>
      </div>
      <el-form label-width="40px">
        <el-form-item label="视频">
          <input
            ref="video-file"
            type="file"
          >
        </el-form-item>
        <el-form-item label="封面">
          <input
            ref="image-file"
            type="file"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="authUpload"
          >开始上传</el-button>
          <el-button>返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
/* eslint-disable */
i
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值