vue upload 视频上传 七牛云存储

一、上传到后端指定的服务器

后端人员有配置好服务器地址，我们可以直接用element-ui的组件进行视频上传，直接将el-upload组件的action属性配置成后端给的地址即可。

一篇比较好的参考文章，细看

1.引入库

element官网引入库配置

npm i element-ui -S

2.配置上传组件参数（具体参考el-upload组件）

如选取可拖拽/点击上传视频的组件：

class="upload-demo"

drag // 可拖拽上传

action="https://jsonplaceholder.typicode.com/posts/" // 上传地址，后端给（没有则填"#"）

multiple // 可同时上传多个文件

:show-file-list="false" // 去除默认上传时展示的进度条

:before-upload="beforeUpload" // 配置上传文件前的格式校验规则

accept=".mp4" // 配置文件夹点开后，过滤展示的文件格式（字符串类型）

>

methods:{

beforeUpload(file){

if ( file.name.split('.')[1].toLowerCase() != 'mp4' ){

this.$message.error('文件格式错误~')

return false; // 终止上传

}

}

}

二、上传到七牛云

1、引入库

JavaScript SDK 下载_对象存储 （官网）

上传视频到七牛云并获取封面 （参考文章）

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、完整代码

提示：由于上传到七牛云，而非后端配置的服务器地址，所以el-upload中的 action = “#”

拓展：

上传视频，获取视频第一帧作为封面 （其中video.currentTime = 1 指的是视频第一秒，为0才是第一帧） 上传文件格式校验