vue upload 视频上传 七牛云存储
vue element ui的upload组件上传视频到后端指定服务器、七牛云。拿到上传的视频的互联网访问路径。
·
一、上传到后端指定的服务器
后端人员有配置好服务器地址,我们可以直接用element-ui的组件进行视频上传,直接将el-upload组件的action属性配置成后端给的地址即可。
1.引入库
npm i element-ui -S
2.配置上传组件参数(具体参考el-upload组件)
如选取可拖拽/点击上传视频的组件:
<el-upload
class="upload-demo"
drag // 可拖拽上传
action="https://jsonplaceholder.typicode.com/posts/" // 上传地址,后端给(没有则填"#")
multiple // 可同时上传多个文件
:show-file-list="false" // 去除默认上传时展示的进度条
:before-upload="beforeUpload" // 配置上传文件前的格式校验规则
accept=".mp4" // 配置文件夹点开后,过滤展示的文件格式(字符串类型)
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
methods:{
beforeUpload(file){
if ( file.name.split('.')[1].toLowerCase() != 'mp4' ){
this.$message.error('文件格式错误~')
return false; // 终止上传
}
}
}
二、上传到七牛云
1、引入库
上传视频到七牛云并获取封面 (参考文章)
npm install qiniu-js
import * as qiniu from 'qiniu-js'
2、实现方式
(1)配置上传参数示例(参考上面的官网)
// 上传视频至七牛云
uploadVideo(file){
const suffix = file.name.split('.')[1]; // 后缀名
const _this = this;
const current = new Date().getTime();
// const key = `video_${current}.${suffix}`; // key为上传后文件名 必填
const key = null; // key:文件资源名,为空字符串时则文件资源名也为空,为 null 或者 undefined 时则自动使用文件的 hash 作为文件名
const config = {
useCdnDomain: true,
region: qiniu.region.z2, // 根据地区不同,官网有不同的配置
concurrentRequestLimit: 1000,
};
var observable = qiniu.upload(file, key, _this.qiniuToken, config); // _this.qiniuToken 由后端提供,通过接口获取
var observer = {
next(res) { // 用于展示上传进度
_this.percent = res.total.percent;
},
error(err) {
_this.$Message.destroy();
_this.$Message.error(err.data.error); // 上传错误报错
},
// 上传成功的回调,res中可以拿到七牛云返回的key和hash
complete(res) {
_this.videoForm.file = res.hash; // 七牛云回传的视频hash 和 key
_this.$Message.destroy();
_this.$Message.success('上传成功!');
if ( !_this.videoForm.cover ) _this.getVideoCover(file); // 默认截取视频第一帧作为封面(存在用户自定义上传的封面时,不进行覆盖)
let videoName = file.name.split('.')[0].length <= 30 ? file.name.split('.')[0] : file.name.split('.')[0].substring(0,30);
_this.videoForm.title = _this.videoForm.title || videoName; // 默认将视频名称作为标题
},
};
this.subscription = observable.subscribe(observer); // 开始上传(赋值给一个全局的参数,可以在合适的时机通过:subscription.unsubscribe() 终止上传)
},
参数说明: (参考上述官网中的 API Reference Interface)
observer: observer 为一个 object,用来设置上传过程的监听函数,有三个属性 next、error、complete:
const observer = {
next(res){
// 接收上传进度信息的回调函数
},
error(err){
// 上传错误后触发
},
complete(res){
// 接收上传完成后的后端返回信息,具体返回结构取决于后端 SDK 的配置,笔者配置后返回的是每一个上传资源对应唯一的key和hash值,可以用该值拼接上后端配置的头部,对该资源进行网络请求。
}
}
(2)拿到上传到七牛云的图片路径:图片上传到七牛云后,根据后端返回的注册配置地址+七牛云返回的图片/视频唯一的key值,组合成互联网上图片/视频的访问路径。
如:
3、完整代码
<template>
<el-upload
class="upload-box"
ref="upload"
:show-file-list="false"
:before-upload="beforeUpload"
accept=".mp4"
:disabled="disableUpload"
:max-size="1024 * 1024"
action="#"
>
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</template>
<script>
export defalt{
methods:{
beforeUpload(file){
if ( file.name.split('.')[1].toLowerCase() != 'mp4'){
this.errorMessage = '文件格式错误,只允许后缀名为.mp4的文件';
return false; // 终止上传
} else {
this.uploadVideo(file); // 上传视频到七牛云
}
},
uploadVideo(file){ // 为上述示例函数
// ...
}
}
}
</script>
提示:由于上传到七牛云,而非后端配置的服务器地址,所以el-upload中的 action = “#”
拓展:
- 上传视频,获取视频第一帧作为封面 (其中video.currentTime = 1 指的是视频第一秒,为0才是第一帧)
- 上传文件格式校验
更多推荐
已为社区贡献6条内容
所有评论(0)