vue element-ui的直传视频到阿里云oss（亲测有效）
- 最近我们公司在做一个官网涉及到图片视频上传的问题，，时间比较紧急（实际后端想偷懒），就让我直传视频到阿里云的oss上。我一听，也是一脸懵逼，人在家中坐，锅从天上来。
话不多说，我直冲度娘，网上的案例真的是非常的多，眼花缭乱，我也试了几个发现都是有问题的，又联系不到博主，最终我还是放弃了，干脆自己搞一个吧，经过三天三夜的奋战（其实是一晚上）！
所以分享出来给各位小伙伴们，希望早日脱坑！
这个是效果图，因为我后台用的是vue所以说为了方便就直接用element ui了，样式在下面，可以根据自己的需求更改。
阿里oss的安装
npm install ali-oss --save
3.封装oss通用上传js工具类
"use strict";
import { dateFormat } from './utils.js'
var OSS = require("ali-oss");
let url='';
export default {
/**
* 创建随机字符串
* @param num
* @returns {string}
*/
randomString(num) {
const chars = [
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
"o",
"p",
"q",
"r",
"s",
"t",
"u",
"v",
"w",
"x",
"y",
"z"
];
let res = "";
for (let i = 0; i < num; i++) {
var id = Math.ceil(Math.random() * 35);
res += chars[id];
}
return res;
},
/**
* 创建oss客户端对象
* @returns {*}
*/
createOssClient() {
return new Promise((resolve, reject) => {
const client = new OSS({
region: "XXXXX", // 请设置成你的
accessKeyId: "XXXXX", // 请设置成你的
accessKeySecret: "XXXXX", // 请设置成你的
bucket: "XXXXX", // 请设置成你的
secure: true // 上传链接返回支持https
});
resolve(client);
});
},
/**
* 文件上传
* @param option 参考csdn: https://blog.csdn.net/qq_27626333/article/details/81463139
*/
ossUploadFile(option) {
const file = option.file;
const self = this;
// var url = '';
return new Promise((resolve, reject) => {
const date = dateFormat(new Date(), "yyyyMMdd"); // 当前时间
const dateTime = dateFormat(new Date(), "yyyyMMddhhmmss"); // 当前时间
const randomStr = self.randomString(4); // 4位随机字符串
const extensionName = file.name.substr(file.name.indexOf(".")); // 文件扩展名
const fileName =
"video/" + date + "/" + dateTime + "_" + randomStr + extensionName; // 文件名字（相对于根目录的路径 + 文件名）
// 执行上传
self.createOssClient().then(client => {
// 异步上传,返回数据
resolve({
fileName: file.name,
fileUrl: fileName
});
// 上传处理
// 分片上传文件
client
.multipartUpload(fileName, file, {
progress: function(p) {
const e = {};
e.percent = Math.floor(p * 100);
// console.log('Progress: ' + p)
option.onProgress(e);
}
})
.then(
val => {
window.url = val
console.info('woc',url);
if (val.res.statusCode === 200) {
option.onSuccess(val);
return val;
} else {
option.onError("上传失败");
}
},
err => {
option.onError("上传失败");
reject(err);
}
);
});
});
}
};
在src下的util文件创建utils.js工具类
/**
* 时间日期格式化
* @param format
* @returns {*}
*/
export const dateFormat = function(dateObj, format) {
const date = {
"M+": dateObj.getMonth() + 1,
"d+": dateObj.getDate(),
"h+": dateObj.getHours(),
"m+": dateObj.getMinutes(),
"s+": dateObj.getSeconds(),
"q+": Math.floor((dateObj.getMonth() + 3) / 3),
"S+": dateObj.getMilliseconds()
};
if (/(y+)/i.test(format)) {
format = format.replace(
RegExp.$1,
(dateObj.getFullYear() + "").substr(4 - RegExp.$1.length)
);
}
for (const k in date) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(
RegExp.$1,
RegExp.$1.length === 1
? date[k]
: ("00" + date[k]).substr(("" + date[k]).length)
);
}
}
return format;
};
vue页面中的使用
<template>
<div>
<el-form :model="form" label-width="80px" size="small">
<el-form-item label="上传视频">
<el-upload class="upload-demo" action=""
:http-request="fnUploadRequest"
:show-file-list="true"
:limit=1
:on-exceed="beyondFile"
:on-success="handleVideoSuccess"
:before-upload="beforeUploadVideo">
<div tabindex="0" class="el-upload-video">
<i class="el-upload-video-i el-icon-plus avatar-uploader-icon"></i>
</div>
<div class="el-upload__tip" slot="tip">上传视频文件，且不超过500mb</div>
</el-upload>
<el-input type="textarea" rows="5" v-model="urls"></el-input>
</el-form-item>
</el-form>
</div>
</template>
js中的代码
<script>
import oss from '../../util/oss.js'
export default {
data: function() {
return {
form: {
status: true
},
url:[],
urls:''
}
},
methods: {
/**
* @description [fnUploadRequest 覆盖默认的上传行为，实现自定义上传]
* @param {object} option [上传选项]
* @return {null} [没有返回]
*/
async fnUploadRequest(option) {
oss.ossUploadFile(option);
},
// 视频上传
beforeUploadVideo(file) {
// todo
},
// 视频上传成功后
handleVideoSuccess(response, file, fileList) {
console.log('url',window.url);
console.log('url',window.url.res.requestUrls);
this.url = window.url.res.requestUrls;
console.log('3322',this.url.length)
for(var i = 0;i<this.url.length;i++){
console.log('href',this.url[i])
this.urls = this.url[i].split('?')[0]
console.log('jjjj',this.url)
}
// todo
},
// 视频添加多个视频文件事件
beyondFile(files, fileList) {
},
}
}
</script>
css代码
<style lang="less" scoped>
.el-upload-video {
width: 100px;
height: 100px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.el-upload-video-i{
font-size: 36px;
padding-top: 25px;
color: #8c939d;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
}
</style>
代码我已经贴完了，如果是你的oss没有配置好的话，就会出现跨域等一系列的问题。但是这个都不是大问题，度娘又很多关于阿里云或者是七牛云的相关配置，我在这里就不多啰嗦了，有什么问题的话，可以留言。老板叫我了，我得改bug去了。
