Vue 腾讯云上传视频 element-ui

最新推荐文章于 2024-08-09 14:52:24 发布

李瑞康i

最新推荐文章于 2024-08-09 14:52:24 发布

阅读量372

点赞数 2

文章标签： vue.js elementui

本文链接：https://blog.csdn.net/weixin_54508417/article/details/118638544

版权

本文介绍了如何在Vue项目中结合Element-UI组件，利用腾讯云COS SDK实现视频文件的上传。首先，通过npm安装腾讯云包，然后在模板部分设置上传组件，包括上传前的验证、超出限制的处理、文件列表管理和进度条显示。在script部分，定义了上传逻辑，包括文件变更、进度更新、文件移除等操作，以及上传成功和失败的回调处理。整个过程覆盖了视频上传的关键步骤和错误处理。

摘要由CSDN通过智能技术生成

Vue 简单腾讯云上传视频文件使用element-ui组件

下载腾讯云包

npm i cos-js-sdk-v5 --save

temlpate 部分

 <el-upload
   :on-remove="handleVodRemove"
   :before-remove="beforeVodRemove"
   :on-exceed="handleUploadExceed"
   :file-list="fileList"
   :on-change="handleChange"
   action="#"
   :limit="1"
   class="upload-demo"
 >
 
   <el-button size="small" type="primary">上传视频</el-button>
   <el-tooltip placement="right-end">
    <div slot="content">
                最大支持1G，<br />
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br />
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br />
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br />
                SWF、TS、VOB、WMV、WEBM 等视频格式上传
      </div>
      <i class="el-icon-question" />
   </el-tooltip>
 </el-upload>
<el-progress v-show='video.showPercentage' :text-inside="true" :stroke-width="15" :percentage="video.percentage"></el-progress>

script 部分

//导入阿里云包
const COS = require('cos-js-sdk-v5')
//>密匙配置项在 >访问管理> 密匙管理 > api密匙管理
const cos = new COS({
  SecretId: '*****', //密匙ID
  SecretKey: '****'	//密匙Key
})
export default {
	data(){
	      // 视频组件参数
      fileList: [], // 上传文件列表
      video: {
        // 课时对象
        videoId: '',	//文件id
        videoName: '',//文件名字
        percentage: 0, // 视频进度条
        showPercentage: false, // 进度条
        videoData: {}// 文件数据
      }
    methods:{
    	 // Change事件
    handleChange (file, fileList) {
      this.video.videoId = file.uid
      this.video.videoName = file.name	
      this.video.videoData = file.raw	
      this.video.showPercentage = true//进度条显示
      console.log(file, fileList)
      //开始上传逻辑
      cos.putObject(
        {
          Bucket: 'ruikang-1306386647',
          Region: 'ap-nanjing',
          Key: this.video.videoName, // 上传到阿里云的文件name
          StorageClass: 'STANDARD', // 固定写法
          Body: this.video.videoData, // 上传文件对象
          onProgress: (progressData) => {
            this.video.percentage = progressData.percent * 100
            //监听percentage  使用在进度条上
          }
        },
        (err, data) => {
          if (err) {
              return this.$message.error('上传失败')
          } else {
              this.video.showPercentage = false
              this.video.percentage = 0
              this.fileList = [{ url: 'http://' + data.Location }]
              this.newQuestionsForm.videoURL = this.fileList[0].url
              this.$message.success('上传成功')
          console.log(err || data)
          console.log(data.Location,'这是上传的地址')
        }
      )
    },
    // 视图上传多于一个视频
    handleUploadExceed (files, fileList) {
      this.$message.warning('想要重新上传视频，请先删除已上传的视频')
    },
    // 移除之前
    beforeVodRemove (file, fileList) {
      console.log('-----后台打印--移除之前----',file)
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 移除
    handleVodRemove (file, fileList) {
      console.log('-----后台打印----移除--',file)
      this.fileList = []
      this.$message({
        type: 'success',
        message: '移除成功'
      })
    }
    }