1 流程概述
前端通过腾讯云sdk使用分段上传将文件上传给腾讯云服务器，成功返回文件 fileId 等数据
前端将 文件id 视频url 封面url等信息 传送给服务器 ，服务器存储在数据库的表中
2 代码详解
第一步 安装SDK插件
npm install vod-js-sdk-v6
第二步 在页面引入SDK
import TcVod from ‘vod-js-sdk-v6‘;
第三步 创建HTML元素 显示 进度和 上传功能
1 <div class="fileLoading" v-if="fileLoading"> //进度条显示 2 <el-progress type="circle" :percentage="fileProgress"></el-progress> 3 <div><el-button type="text">取消上传</el-button></div> 4 </div>
1 <el-dialog 2 :title="vedioEditFrom.id ? ‘编辑视频文件‘ : ‘添加视频文件‘" 3 :visible.sync="dialogEditVisible" 4 width="700px" 5 :close-on-click-modal="false" 6 :before-close="closeBefore" 7 > 8 <el-form :model="vedioEditFrom" ref="vedioEditFrom" :rules="rules"> 9 <el-form-item label-width="140px" label="视频标题 : " prop="vdTitle"> 10 <el-input v-model="vedioEditFrom.vdTitle" placeholder="请输入视频标题"></el-input> 11 </el-form-item> 12 <el-form-item v-if="!vedioEditFrom.id" label-width="140px" label="存储至 : " prop="ClassId"> 13 <el-cascader :props="props" v-model="vedioEditFrom.ClassId"></el-cascader> 14 </el-form-item> 15 <el-form-item v-if="listQuery.vb_id" label-width="140px" label="所属视频 : "> 16 <el-tag class="filter-item" closable @close="deleteTag">{{ vb_name }}</el-tag> 17 </el-form-item> 18 <el-form-item v-if="!vedioEditFrom.id" label-width="140px" label="视频封面图片 : " prop="coverFile"> 19 <el-upload 20 class="avatar-uploader" 21 action="fakeaction" 22 ref="upCoverImg" 23 :auto-upload="false" 24 :show-file-list="true" 25 :disabled="isUpImgDisabled" 26 accept=".jpg,.jpeg,.png,.JPG,.JPEG" 27 :on-change="UpdataImgFileChange" 28 list-type="picture-card" 29 > 30 <i v-if="!vedioEditFrom.coverFile" class="el-icon-plus avatar-uploader-icon"></i> 31 <div slot="file" slot-scope="{ file }"> 32 <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" /> 33 <span class="el-upload-list__item-actions"> 34 <span class="el-upload-list__item-delete" @click="cover_imgRemove()"><i class="el-icon-delete"></i></span> 35 </span> 36 </div> 37 <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div> 38 </el-upload> 39 </el-form-item> 40 <el-form-item v-if="!vedioEditFrom.id" label-width="140px" label="视频文件 : " prop="mediaFile"> 41 <el-upload 42 class="radio-btn" 43 ref="upVedio" 44 action="fakeaction" 45 :auto-upload="false" 46 :show-file-list="true" 47 :disabled="isUpVedioDisabele" 48 :file-list="vedioFiles" 49 accept=".mp4,.avi,.wmv,.mpeg,.m4v,.mov,.asf,.flv,.f4v,.rmvb,.rm,.3gp,.vob" 50 :on-change="vedioFileChange" 51 list-type="text" 52 > 53 <el-button slot="trigger" size="small" type="primary" :disabled="isUpVedioDisabele">选取文件</el-button> 54 <el-button size="small" type="danger" @click="vedioRemove" v-show="isUpVedioDisabele">删除</el-button> 55 56 <div slot="tip" class="el-upload__tip">只能上传mp4,avi,wmv,mpeg,m4v,mov,asf,flv,f4v,rmvb,rm,3gp,vob文件，且不超过2000MB</div> 57 </el-upload> 58 </el-form-item> 59 <el-form-item label-width="140px" label="视频作者 : " prop="vdAuthor"> 60 <el-input v-model="vedioEditFrom.vdAuthor" placeholder="请输入视频作者"></el-input> 61 </el-form-item> 62 <el-form-item label-width="140px" label="视频介绍 : " prop="vdIntroduce"> 63 <d2-quill style="min-height: 200px; margin-bottom: 20px;" v-model="vedioEditFrom.vdIntroduce" /> 64 </el-form-item> 65 <el-form-item label-width="140px" label="排序 : " prop="sort"> 66 <el-input-number v-model="vedioEditFrom.sort" :min="1" label="请输入排序"></el-input-number> 67 </el-form-item> 68 69 <el-form-item label-width="140px" label="发布日期 : " prop="publicDate"> 70 <el-date-picker v-model="vedioEditFrom.publicDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期时间"></el-date-picker> 71 </el-form-item> 72 <el-form-item label-width="140px" label="视频试看秒数 : " prop="vdSeeSeconds"> 73 <el-input v-model.number="vedioEditFrom.vdSeeSeconds" placeholder="请输入视频试看秒数" type="Number"></el-input> 74 </el-form-item> 75 <el-form-item label-width="140px" label="虚拟播放次数 : " prop="playSumVirtual"> 76 <el-input-number v-model="vedioEditFrom.playSumVirtual" :min="0" label="请输入虚拟播放次数"></el-input-number> 77 </el-form-item> 78 <!-- <el-form-item label-width="140px" label="是否启用 : " prop="delStatus"> 79 <el-switch v-model="vedioEditFrom.delStatus" active-text="启用" inactive-text="未启用" :active-value="1" :inactive-value="2"></el-switch> 80 </el-form-item> --> 81 <el-form-item label-width="140px" label="是否免费 : " prop="vdIsfree"> 82 <el-switch v-model="vedioEditFrom.vdIsfree" active-text="是" inactive-text="否" :active-value="2" :inactive-value="1"></el-switch> 83 </el-form-item> 84 <el-form-item label-width="140px" label="备注 : " prop="remark"> 85 <el-input type="textarea" :rows="2" placeholder="请输入视频介绍" maxlength="60" show-word-limit v-model="vedioEditFrom.remark"></el-input> 86 </el-form-item> 87 </el-form> 88 <div slot="footer" class="dialog-footer"> 89 <el-button @click="cancel">取 消</el-button> 90 <el-button type="primary" v-if="vedioEditFrom.id" :loading="btnLoading" @click="submitUpload">确 定</el-button> 91 <el-button type="primary" v-else :loading="btnLoading" @click="addVedioFile">添 加</el-button> 92 </div> 93 </el-dialog>
第四步 上传文件
1 /* 2 * cs 2020-5-14 3 * 上传视频 4 */ 5 addVedioFile() { 6 self.fileProgress = 0; //进度条重置为0 7 //表单验证 8 self.$refs.vedioEditFrom.validate(async valid => { 9 if (valid) { 10 console.log(self.vedioEditFrom); 11 try { 12 // 创建获取上传签名的 函数 13 const getSignature_copy = async function() { 14 const { data } = await getSignature({ 15 ClassId: self.vedioEditFrom.ClassId[1], 16 signType: 2 17 }); 18 return data.signature; 19 }; 20 //创建 上传对象 并设置获取签名的 函数 21 const tcVod = new TcVod({ 22 getSignature: getSignature_copy 23 }); 24 // 显示上传进度条 25 self.fileLoading = true; 26 // 设置上传的 视频文件 封面文件 媒体名字 27 const uploader = tcVod.upload({ 28 mediaFile: self.vedioEditFrom.mediaFile.raw, 29 coverFile: self.vedioEditFrom.coverFile && self.vedioEditFrom.coverFile.raw, 30 mediaName: self.vedioEditFrom.vdTitle 31 }); 32 33 // 监听视频上传进度 实时改变进度条 34 uploader.on(‘media_progress‘, function(info) { 35 console.log(info); 36 self.fileProgress = Math.round(info.percent * 100); 37 }); 38 let doneResult; 39 // 获取上传完成返回的参数 40 doneResult = await uploader.done(); 41 console.log(doneResult); 42 self.vedioEditFrom.fileId = doneResult.fileId; 43 console.log(self.vedioEditFrom.fileId); 44 if (self.listQuery.vb_id) { 45 self.vedioEditFrom.vbId = self.listQuery.vb_id; 46 } 47 // 调用接口 将文件数据存入数据库 48 await saveTVideoDetail(self.vedioEditFrom); 49 await saveTAudioManagement({ 50 fileId: self.vedioEditFrom.fileId, 51 mediaFile: doneResult.video.url, 52 coverUrl: doneResult.cover && doneResult.cover.url, 53 title: self.vedioEditFrom.vdTitle, 54 ClassId: self.vedioEditFrom.ClassId[1] 55 }); 56 57 self.$message({ 58 message: ‘上传成功‘, 59 type: ‘success‘ 60 }); 61 self.fileProgress = 0; 62 self.cancel(); 63 self.listTVideoDetailPage(); 64 } catch (err) { 65 self.fileProgress = 0; 66 self.$message({ 67 message: ‘上传失败‘, 68 type: ‘error‘ 69 }); 70 } 71 self.fileLoading = false; 72 } else { 73 console.log(‘error submit!!‘); 74 return false; 75 } 76 }); 77 },