vue直接oss视频文件上传结合element-ui

参考阿里云网站地址：
https://help.aliyun.com/document_detail/32068.html?spm=a2c4g.11186623.6.1255.5cd837e8liBsPb
element-ui框架地址：
https://element.eleme.cn/#/zh-CN/component/installation

第一步安装element-ui + ali-oss

npm i element-ui -S

npm i ali-oss

第二步在main.js引入依赖

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import OSS from 'ali-oss';

第三步使用及修改
element框架结构层：

<el-form-item label="视频上传:" prop="video">
	<el-upload
		 class="upload-demo"
		 action=''//需要自定义上传所以这里可以不用写
		 :before-upload="beforeUploadVideo" //文件上传验证方法
		 :on-remove="handleVODRemove" //文件删除方法
		 :http-request="hadhttprequest"//自定义上传方法
	     multiple
		 :limit="1" //文件个数限制
		 :file-list="ruleForm.video"> //文件渲染结构
     <el-button v-if="butstate==0" size="small" type="primary">点击上传 <i class="el-icon-upload el-icon--right"></i></el-button> //上传按钮
	 <el-button v-else-if="butstate==1" slot="tip" type="info" :loading="true" disabled>视频正在向服务器上传请稍等...</el-button>
	 <el-button v-else-if="butstate==2" slot="tip" type="success"  disabled>已存在视频，请删除原先视频在进行上传！</el-button>
	 <div slot="tip" class="el-upload__tip">请保证视频格式正确，且不超过1G</div>
  </el-upload>
</el-form-item>

数据处理层：

ruleForm: {
     
	name: '',
	sort:'',
	introduction:'',
	cover_img: [],
	video:[],
},
butstate:0

// 视频上传文件验证
beforeUploadVideo(file) {
     
	const isLt1G = file.size / 1024 / 1024 < 1024;
	if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'].indexOf(file.type) == -1) {
     
		this.$message.error('请正确上传视频格式');
		return false;
	};
	if (!isLt1G) {
     
		this.$message.error('不能超过1G哦!');
		return false;
	};
	this.butstate=1;//项目需要
},
//文件删除
handleVODRemove(file, fileList) {
     
	this.ruleForm.video = fileList;
	this.butstate=0;
},
//直接向阿里云上传阿里云
async getOssToken(data,content){
     
	let that = this;
	// 上传到阿里云视频文件路径名称，你个人爱好，谁也阻挡不聊你，不要用中文，你硬要...
	let videoName = 'productvideo/66666666/'+Date.parse(new Date())/1000+content.file.name;
	//我的是用文件夹名+用户id+时间戳文件名，不要问为什么，我喜欢！
	let client = new OSS({
     
		 region: '这个问后台要',
		 accessKeyId: data.AccessKeyId,
		 accessKeySecret: data.AccessKeySecret,
		 stsToken: data.SecurityToken,
		 bucket:'这个问后台要'
	 });
	 //贞子判断
	 try {
     
	 	//multipartUpload这个什么意思看文档，我只告诉你用来直接访问oss
		let result = await client.multipartUpload(videoName , content.file, {
     
			progress: async function (p) {
     //这是上传进度条
				content.onProgress({
     percent: parseInt(p * 100)+'%', returnValue: true });
				if (p==1) {
     
					that.butstate=2;
				};
			}
		 });
		 //这是文件反馈路径赋值，个人爱好想怎么写怎么写
		return (that.ruleForm.video[0]  = [result].map(curr =>{
     //on-change回调的参数
			return {
     
				name:Date.parse(new Date())/1000+content.file.name,
				url: curr.res.requestUrls[0].split('?')[0],
				response:curr.res.requestUrls[0].split('?')[0],
			}
		})[0]);
	} catch (e) {
     
		 console.log('失败',e)
		if (e.code === 'ConnectionTimeoutError') {
     
			content.onError('视频上传超时')
			throw "视频上传超时!";
		}else{
     
			content.onError('视频上传失败')
		}
	}
},
// 视频自定义上传访问授权
async hadhttprequest(content){
     
    //这里是用来调用接口请求获取服务端返回阿里云oss验证参数，简单的说问后台那吊毛要接口就可以了！
	let that=this;
	//that.getOssToken(res.data.Credentials,content);
},

//搞事情