android 上传视频到腾讯云文档,el-upload实现腾讯云视频上传功能的方法

最新推荐文章于 2023-06-05 20:28:14 发布
最新推荐文章于 2023-06-05 20:28:14 发布
阅读量741 收藏
点赞数
文章标签： android 上传视频到腾讯云文档
本文介绍了如何利用vue.js、element-ui的el-upload组件和腾讯云的vod-js-sdk-v6 SDK，实现视频上传功能。文章详细阐述了上传前的格式检查、进度条显示、获取上传签名、监听上传进度、上传成功后的处理以及视频转码的过程。在表单提交时，仅传递fileId给后端，预览时通过此fileId获取视频详情。
摘要由CSDN通过智能技术生成

el-upload实现腾讯云视频上传功能的方法

发布时间：2020-07-01 15:50:18

来源：亿速云

阅读：155

作者：清晨

这篇文章主要介绍el-upload实现腾讯云视频上传功能的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

起因

根据需求要实现一个视频上传功能，之前采用七牛云上传，小点视频没问题，大体积视频比如600M左右，再考虑到网速等其他原因就会花费半个小时左右。

后来分析到不仅要考虑上传时间的问题，更重要的是要考虑用户使用4G 网络的情况，考虑用户的流量，线上的视频，不能不做压缩转码，就放到页面上，视频不是图片，不能甩到 cdn 上就行了。 要考虑视频大小，pc 移动端适配，转码，还有防盗版等问题。最终决定使用腾讯云上传视频

在项目中的使用

项目使用vue.js + element-ui el-upload组件

引入sdk：

npm install vod-js-sdk-v6

import TcVod from 'vod-js-sdk-v6'

html代码

//上传

ref="upload"

action="filename"

:http-request="httpRequest"

:show-file-list="false">

最低0.47元/天 解锁文章
GrapeDoor
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
flutter Android 腾讯云上传
仰望星空
01-21 939
最近用flutter开发IM软件,用到腾讯云上传图片视频等资源,发现居然没有改插件,于是动动手自己写了个iOS和安卓的 Android 接入腾讯云上传工具,iOS在另一文章中有详细记载,有问题可以留言 /** * 腾讯云 */ public class Plugin implements MethodCallHandler { Registrar registrar; Meth...
Android网络编程(六) 之 Volley实战，上传文件到腾讯云
子云心的博客
07-17 1698
我们在上一博文《Android网络编程(五) 之 Volley框架的使用》中简单介绍了利用Volley进行网络请求的GET和POST的基本使用。今天我们进一步探讨怎样使用Volley来进行文件的上传。 1 表单结构 文件上传其实就是进行表单的提交，只不过表单提交中有某个字段是该文件的二进制值。我们就拿腾讯云上传API接入来讲解Volley上传的使用步聚，开始前我们来看看表单提交的数据格式是怎么...
腾讯云 上传视频
haifangnihao的博客
03-28 3199
腾讯云 上传视频 所遇到的坑一，按照官方文档，及平台的实列 Demo ， 最后还是报错， 上传总是不成功。2017-01-13 11:13:26.458059 Get[663:214100] demoapp log 任务失败2017-01-13 11:13:26.458255 Get[663:214100] 上传视频的url(null) 上传视频的fileID = (null)2017-01-13...
腾讯云点播web上传视频
qq_43012432的博客
09-27 532
腾讯云点播视频上传
android 上传视频到腾讯云文档,上传视频截取第一帧做视频封面，并上传腾讯云点播...
weixin_32352621的博客
05-28 671
1、VUE页面上传视频到后台:limit="1":http-request="uploadVideo" :file-list="fileList3">点击上传只能上传AVI、WMV、RM、RMVB、MP4等格式文件2、自定义上传方法import axios from 'axios'uploadVideo (event){let form = new FormData()var that = ...
vue结合el-upload实现腾讯云视频上传功能
11-20
在本文中，我们将探讨如何利用Vue.js和Element UI的el-upload组件来实现腾讯云视频上传功能，以解决在上传大体积视频时遇到的性能和用户体验问题。首先，我们需要理解为什么选择腾讯云作为视频上传的解决方案。传统...
elemetUi 组件--el-upload实现上传Excel文件的实例
08-29
elemetUi 组件的 el-upload 是一个功能强大且灵活的上传组件，通过它我们可以轻松地实现文件上传的功能。下面我们将详细介绍如何使用 elemetUi 组件的 el-upload 实现上传 Excel 文件的实例。 知识点1：el-upload ...
Vue实现腾讯云点播视频上传功能的实现代码
10-14
在Vue.js中实现腾讯云点播视频上传功能，你需要结合腾讯云提供的vod-js-sdk-v6库，以及可能的前端框架如ElementUI来构建用户界面。以下是一个详细的步骤指南： 首先，确保安装必要的依赖： ```bash npm i vod-js-...
vue+axios+el-upload实现文件上传（带参数）：
01-03
本次使用http-request自定义文件上传： 上传头像 备注：不要自己设置请求头类型，让... // 可以在上传之前就行文件类型和大小处理 var formData = new FormData(); formData.append('annex', params.file);
腾讯云服务器ftp部署及文件上传
热门推荐
tingyun_say的博客
06-27 2万+
首先，先把服务器的配置说明一下：操作系统：CentOS 6.6 64位 CPU：1核 内存：1GB 系统盘：20G（云硬盘） 公网带宽：1Mbps 对我来说挺合适的一个配置，把自己的爬虫放上面运行，数据存mysql里面已经足够用了。之前那篇写的是配置桌面环境，可是后来发现这个配置再加上个桌面环境，卡的我都不想说了….于是还是老老实实用字符界面了。1.首先是安装ftp服务并且开启它： sudo yu
cossync:腾讯云COS同步（批量上传）工具
05-30
腾讯云COS （V3，V5 BUCKET）文件夹同步（批量上传）工具 支持V3，V5版本的bucket。 腾讯云文档： 安装 cmd: npm install -g cossync require: npm install --save cossync CLI配置 准备一个配置文件，例如conf.json： // V3 BUCKET { "appId":"100012345", "secretId":"ABCDABCDABCDABCDABCDABCD", "secretKey":"abcdabcdabcd", "expired":1800, "bucket":"bucketName", "remotePath":"/test/", "localPath":"./", "maxAge":31536000, "strict
Android 即时音视频解决方案1——腾讯云
09-25
博客地址 http://blog.csdn.net/sbsujjbcy/article/details/48735039
视频上传到腾讯云(附带：获取播放视频的签名)
最新发布
m0_56138821的博客
06-05 552
视频托管到腾讯云（客户端上传）、获取播放视频的签名
腾讯云点播web端视频上传及其注意事项
TDSSS的博客
03-30 2211
腾讯云点播的使用和遇到的一些坑
腾讯云视频上传问题总结
MoreFeels的博客
08-17 4800
使用腾讯云提供java sdk4.4 MultipartUploadVodFile使用此接口，分片上传，分片大小设置1024*1024*20会被腾讯服务器拒绝，无法上传， 目前设置为1024*1024*5 最小分片设置为1024*512`/** * 域名：vod.qcloud.com * 接口名: MultipartUploadVodFile * @Desc
Android中使用又拍云存储来上传文件（包括图片、音频和视频等）
zhangyupeng_hehe的专栏
09-15 5357
资料：         在又拍云存储上申请账号，然后购买一定的空间。（具体可上它的官网详细了解） 原理：       又拍云存储说白了就是一个中介。客户端把所需要上传的东西传到又拍云端服务器，云端服务器在通知到我们自己创建的服务器，然后我们自己的服务器在和我们的客户端进行相应的交互。 运用以及过程中遇到的问题：        1）ftprush工具。通过查看又拍的API我们可以通过搭建该
android读取服务器视频,使用七牛云存储上传android本地视频并播放
weixin_31580797的博客
05-26 857
项目最近又来了添加视频的需求，暂定存储到七牛。具体步骤大致分为三步：1:获取本地视频缩略图展示，当用户选择某一段视频时，拿到该视频的地址。2:通过七牛sdk，将该视频地址传入，上传到七牛云存储，然后获取视频videoUrl和videoThumail。3:通过视频播放器播放视频。2017-06-21 20_59_30.gif一：获取视频列表并在手机中展示。这里大致可以分为一下几步：1:由于获取视频列...
el-upload上传图片和文件
沙雕JavaScripter的博客
06-22 1018
el-upload上传图片和文件
vue+elementui运用el-upload结合vod-js-sdk-v6实现腾讯云点播视频上传
i15730384741的博客
05-25 2668
第一步：npm install vod-js-sdk-v6 写成组件 upload代码片。 // An highlighted block <template> <div style="width: 400px"> <el-upload action="#" :accept="accept" :disabled="disabled" :limit="1" :http-request="uploadVideo
运用el-upload结实现腾讯云点播视频上传
03-30
1. 安装腾讯云点播 SDK 首先需要安装腾讯云点播 SDK，可以通过 npm 安装： ``` npm install vod-node-sdk --save ``` 2. 引入 el-upload 组件 在项目中引入 el-upload 组件： ```js import { ElUpload } from 'element-plus' ``` 3. 初始化腾讯云点播 SDK 在使用腾讯云点播 SDK 之前，需要先初始化： ```js import Vod from 'vod-node-sdk' const vod = new Vod({ SecretId: 'yourSecretId', SecretKey: 'yourSecretKey', }) ``` 4. 配置 el-upload el-upload 组件有很多配置项，我们需要将其中一些配置项设置为腾讯云点播需要的参数。 ```html <template> <el-upload :action="uploadUrl" :headers="headers" :on-success="onSuccess" :before-upload="beforeUpload" > <el-button type="primary">点击上传视频</el-button> </el-upload> </template> <script> import { ElUpload } from 'element-plus' import Vod from 'vod-node-sdk' export default { components: { ElUpload, }, data() { return { vod: null, uploadUrl: '', headers: {}, } }, created() { // 初始化腾讯云点播 SDK this.vod = new Vod({ SecretId: 'yourSecretId', SecretKey: 'yourSecretKey', }) // 获取上传 URL 和上传鉴权参数 this.vod.getUploadSignature({ fileType: 'video', fileName: 'test.mp4', }).then(({ uploadUrl, headers }) => { this.uploadUrl = uploadUrl this.headers = headers }) }, methods: { // 上传成功回调函数 onSuccess(response, file, fileList) { console.log(response) }, // 上传前的回调函数，用来设置上传参数 beforeUpload(file) { const { headers } = this headers['X-Session-Token'] = file.token headers['Content-Type'] = file.type return true }, }, } </script> ``` 5. 总结 通过以上步骤，我们就可以使用 el-upload 组件结合腾讯云点播 SDK 完成视频上传了。其中需要注意的是，上传文件的文件名需要和获取上传 URL 时传入的文件名一致，否则会上传失败。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值