一、效果演示
a.测试界面初始化
b.点击【上传视频】
c.点击【开始上传】
d.点击【上传音频】选择音频之后点击【开始上传】
c.点击【上传图片】,注意图片上传为单按钮,选择文件之后自动完成上传
d.点击【确定】来获取以上几个上传文件成功之后返回的最关键的key值
注:其中音视频我们取其videoId,图片取url
二、测试页面代码
此处,先展示上方测试页面对已封装好的上传组件的引用代码,如下:
<template>
<div>
<h5>上传视频组件测试</h5>
<div>
<video-upload v-model="uploadVideoId"></video-upload>
</div>
<h5>上传音频组件测试</h5>
<div>
<audio-upload v-model="uploadAudioId"></audio-upload>
</div>
<h5>上传图片组件测试</h5>
<div>
<img-upload v-model="uploadImgUrl"></img-upload>
</div>
<h5>获取上传成功的值</h5>
<el-button size="small" type="primary" @click="getVal">确定</el-button>
<div class="msgContent" v-if="msg" v-html="msg"></div>
</div>
</template>
<script>
import videoUpload from '@/components/videoUpload'
import audioUpload from '@/components/audioUpload'
import imgUpload from '@/components/imgUpload'
export default {
data() {
return {
uploadVideoId: '',
uploadAudioId: '',
uploadImgUrl: '',
msg: ''
}
},
components: {
videoUpload,
audioUpload,
imgUpload
},
methods: {
getVal() {
this.msg = `
this.uploadVideoId is :
<br>
${this.uploadVideoId}
<br>
this.uploadAudioId is :
<br>
${this.uploadAudioId}
<br>
this.uploadImgUrl is :
<br>
${this.uploadImgUrl}`
}
}
}
</script>
<style lang="less" scoped>
h5 {
margin: 36px 0 12px 0;
}
.msgContent {
margin-top: 10px;
font-size: 14px;
color: #606266;
line-height: 24px;
}
</style>
主要实现的上传组件为图片上传(imgUpload)、视频上传(videoUpload)、音频上传(audioUpload),其中图片上传的组件是基于阿里云对象存储(OSS) 来实现的,而音视频上传都是基于阿里云视频点播(VOD)实现的,具体实现方式见下文。
三、图片上传
官方文档介绍:对象存储OSS-SDK参考-Node.js上传文件
相对音视频的上传,图片上传的方式会比较简单,我们先介绍图片上传组件的实现方式吧。首先我们参考的是node.js环境下的上传文件最简单的方式,即通过put接口来上传一个本地文件到OSS,至于流式上传、分片上传、断点上传等相对较复杂的上传方式此处不予介绍,反正举一反三,都是差不多的套路。
第一步,安装SDK
注:支持的Node.js版本: Node.js >= 8.0.0 如果需要在 Node.js < 8 的环境中使用,请使用 ali-oss 4.x版本。
npm install ali-oss
第二步,使用SDK
通过初始化一个client,然后调用其put方法即可。
官网给出的关键代码:
let OSS = require('ali-oss')
let client = new OSS({
region: '<Your region>',
accessKeyId: '<Your AccessKeyId>',
accessKeySecret: '<Your AccessKeySecret>',
bucket: 'Your bucket name'
});
async function put () {
try {
let result = await client.put('object-name', 'local-file');
console.log(result);
} catch (e) {
console.log(er);
}
}
put();
结合我们的实际应用场景,我们在new OSS的时候会多传一个stsToken参数,stsToken的值由后端接口给我们提供,此处我们取的是后端返回的securityToken,其作用主要用于进行临时授权访问,可以参考官方文档:使用STS访问
另外,基于这位SDK大兄弟的功能我们结合产品需求实现了以下几点额外功能:
a、不要丑陋的原生input按钮,自定义上传按钮;
b、上传限制仅图片格式;
c、上传成功之后展示已上传的缩略图;
d、组件的v-model值用于存储图片上传成功后的url。
OK,然后我们欣赏一下 imgUpload.vue 的实现代码:
<template>
<div>
<input type="file" v-show="false" accept="image/*" ref="input" @change="fileChange">
<!-- 通过$refs操作input的点击事件,调起文件选择 -->
<el-button size="small" type="success" @click="$refs.input.click()">
上传图片
</el-button>
<img v-if="imgUrl" class="imgShow" :src="imgUrl"/>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
uploadFile: null,
imgUrl: ''
}
},
watch: {
imgUrl: function (val) {
if (val !== this.value) {
this.$emit('input', val)
}
}
},
methods: {
fileChange() {
if (!event.target.files[0]) {
return false
}
console.log(event.target.files[0])
if (!event.target.files[0].type.match('image.*')) {
this.$message.error('请选择图片')
return false
}
this.uploadFile = event.target.files[0]
this.$apis.getImageUploadInfo({'fileName': this.uploadFile.name}).then(res => {
if (res.code === '2000') {
let objectName = res.data.key
let OSS = require('ali-oss')
let client = new OSS({
region: res.data.regionId,
accessKeyId: res.data.accessKeyId,
accessKeySecret: res.data.accessKeySecret,
stsToken: res.data.securityToken,
bucket: res.data.bucket
})
const put = async() => {
try {
let result = await client.put(objectName, this.uploadFile)
console.log(result)
if (result.res.statusCode === 200) {
this.$message.success('上传成功')
this.imgUrl = result.url
} else {
this.$message.success('上传失败')
this.imgUrl = ''
}
} catch (e) {
this.$message.error(e)
console.log(e)
}
}
put()
} else {
this.$message.error(res.message)
}
}).catch(error => {
this.$message.error(error)
})
}
}
}
</script>
<style lang="less" scoped>
.imgShow {
display: block;
height: 100px;
margin: 12px 0;
}
</style>
上传成功之后的文件可以去阿里云的对象存储控制台查看,传送门:https://oss.console.aliyun.com/
后台截图:
四、视频上传
官方文档介绍:视频点播-客户端SDK-上传SDK-JavaScript上传SDK
其实基于上面那位OSS大兄弟的强大存储功能我们也可以实现视频的上传存储,但是需求方对于视频的处理要求比较过分,哦不,是比较精致。所以,我们采用阿里云视频点播来实现对视频的上传与播放。阿里云视频点播(VOD)是集音视频采集、编辑、上传、自动化转码处理、媒体资源管理、分发加速、视频播放于一体的一站式音视频点播解决方案。知道它的厉害了吧~
第一步,安装SDK
相对于OSS大兄弟,VOD的安装比较土了,不,是比较简单了,在我们的页面上引入三个JS脚本,脚本下载:视频点播-客户端SDK下载
引入代码,官方demo:
<!-- IE需要es6-promise -->
<script src="../lib/es6-promise.min.js"></script>
<script src="../lib/aliyun-oss-sdk4.13.2.min.js"></script>
<script src="../aliyun-vod-upload-sdk1.3.1.min.js"></script>
实际应用中,我们会在index.html的屁股后面引入这三位大兄弟,如下:
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 引入第三方库-阿里云视频上传 start-->
<script src="./static/lib/es6-promise.min.js"></script>
<script src="./static/lib/aliyun-oss-sdk-5.2.0.min.js"></script>
<script src="./static/lib/aliyun-upload-sdk-1.4.0.min.js"></script>
<!-- 引入第三方库-阿里云视频上传 end-->
</body>
ps:为什么不放<head>里边引入,我就不解释了。
第二步,使用SDK
使用过程中,推荐参考上方下载好的示例代码,里边注释给的也很清楚,相比较官网文档的话会更好理解。
官网给出的关键代码:
var uploader = new AliyunUpload.Vod({
//分片大小默认1M,不能小于100K
partSize: 1048576,
//并行上传分片个数,默认5
parallel: 5,
//网络原因失败时,重新上传次数,默认为3
retryCount: 3,
//网络原因失败时,重新上传间隔时间,默认为2秒
retryDuration: 2,
// 开始上传
'onUploadstarted': function (uploadInfo) {
log("onUploadStarted:" + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
//上传方式1, 需要根据uploadInfo.videoId是否有值,调用点播的不同接口获取uploadauth和uploadAddress,如果videoId有值,调用刷新视频上传凭证接口,否则调用创建视频上传凭证接口
// uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId);
//上传方式2
// uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret,secretToken);
}
// 文件上传成功
'onUploadSucceed': function (uploadInfo) {
log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object);
},
// 文件上传失败
'onUploadFailed': function (uploadInfo, code, message) {
log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message);
},
// 文件上传进度,单位:字节
'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(loadedPercent * 100) + "%");
},
// 上传凭证超时
'onUploadTokenExpired': function (uploadInfo) {
console.log("onUploadTokenExpired");
//上传方式1 实现时,根据uploadInfo.videoId调用刷新视频上传凭证接口重新获取UploadAuth
// uploader.resumeUploadWithAuth(uploadAuth);
// 上传方式2 实现时,从新获取STS临时账号用于恢复上传
// uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, secretToken, expireTime);
},
//全部文件上传结束
'onUploadEnd':function(uploadInfo){
log("onUploadEnd: uploaded all the files");
}
});
从例子中可知,这位大兄弟有两种上传方式:VodMode 、STSMode,使用上两者需要的上传凭证是不同的,接下来我们介绍的是STS模式,该模式下需要后端给我们的值有:securityToken、accessKeyId、accessKeySecret
另外,基于这位SDK大兄弟的功能我们结合产品需求实现了以下几点额外功能:
a、不要丑陋的原生input按钮,自定义上传按钮;
b、上传限制仅视频格式及视频大小;
c、上传过程中显示进度条效果;
d、组件的v-model值用于存储视频上传成功后的videoId。
OK,然后我们欣赏一下 videoUpload.vue 的实现代码:
<template>
<div>
<input type="file" v-show="false" accept="video/*" ref="input" @change="fileChange">
<el-button size="small" type="primary" @click="$refs.input.click()" :disabled="disableUpload">
上传视频
</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="uploader.startUpload()" :disabled="disableSubmit">
开始上传
</el-button>
<div class="el-upload__tip">视频文件仅限5分钟以内,大小不超过150M</div>
<template v-if="uploadFile && uploadFile.name">
<div class="el-upload__tip">{{uploadFile.name}}</div>
<el-progress style="width:200px;" :percentage="percentage" :status="percentage === 100 ? 'success' : ''"></el-progress>
</template>
</div>
</template>
<script>
export default {
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
securityToken: '',
accessKeyId: '',
accessKeySecret: '',
disableUpload: false,
disableSubmit: true,
uploadFile: null,
uploader: null,
callback: null,
videoId: '',
percentage: 0
}
},
watch: {
videoId: function (val) {
if (val !== this.value) {
this.$emit('input', val)
}
}
},
methods: {
fileChange() {
if (!event.target.files[0]) {
return false
}
console.log(event.target.files[0])
if (!event.target.files[0].type.match('video.*')) {
this.$message.error('请选择视频文件')
return false
}
this.uploadFile = event.target.files[0]
this.percentage = 0
// 上传文件的size的单位为 字节(b)
// 150兆字节(mb) = 157286400字节(b)
if (this.uploadFile.size <= 157286400) {
this.getAuth(() => {
// 给uploader大佬addFile
this.getUploder()
// 以下三个参数默认为空
// var endpoint = ''
// var bucket = ''
// var objectPre = ''
// if(objectPre)
// {
// object = objectPre +"/"+ event.target.files[i].name
// }
// STS的上传方式,需要在userData里指定Title
var userData = '{"Vod":{"StorageLocation":"","Title":"' + this.uploadFile.name + '","Description":"默认描述信息暂无","CateId":"19","Tags":"测试视频"}}'
this.uploader.addFile(this.uploadFile, '', '', '', userData)
console.log(`add file: ${this.uploadFile.name}`)
this.disableSubmit = false
})
} else {
this.disableSubmit = true
this.$message.error('上传的文件大小超过150M,请重新上传')
}
},
getAuth(callback) {
// 获取上传凭证
this.$apis.getVideoUploadAuth().then(res => {
if (res.code === '2000') {
this.securityToken = res.data.securityToken
this.accessKeyId = res.data.accessKeyId
this.accessKeySecret = res.data.accessKeySecret
callback()
} else {
this.$message.error(res.message)
}
}).catch(error => {
this.$message.error(error)
})
},
getUploder() {
let _this = this
/* eslint-disable no-undef */
_this.uploader = new AliyunUpload.Vod({
// 文件上传失败
'onUploadFailed': function (uploadInfo, code, message) {
_this.$message.error(`文件上传失败:${message}`)
console.log(`onUploadFailed: file:${uploadInfo.file.name},code:${code}, message:${message}`)
_this.disableSubmit = true
_this.disableUpload = false
},
// 文件上传完成
'onUploadSucceed': function (uploadInfo) {
console.log(uploadInfo)
// console.log(`onUploadSucceed: ${uploadInfo.file.name}, endpoint:${uploadInfo.endpoint}, bucket:${uploadInfo.bucket}, object:${uploadInfo.object}`)
_this.videoId = uploadInfo.videoId
_this.$message.success('文件上传成功')
_this.disableSubmit = true
_this.disableUpload = false
},
// 文件上传进度
'onUploadProgress': function (uploadInfo, totalSize, loadedPercent) {
_this.percentage = +(loadedPercent * 100).toFixed(0)
// console.log(`onUploadProgress:file:${uploadInfo.file.name}, fileSize:${totalSize}, percent:${(loadedPercent * 100.00).toFixed(2)}%`)
},
// STS临时账号会过期,过期时触发函数
'onUploadTokenExpired': function (uploadInfo) {
console.log('onUploadTokenExpired STS临时账号过期了')
// 实现时,从新获取STS临时账号用于恢复上传
// uploader.resumeUploadWithSTSToken(accessKeyId, accessKeySecret, securityToken, expireTime)
},
onUploadCanceled: function(uploadInfo) {
console.log(`onUploadCanceled:file:${uploadInfo.file.name}`)
},
// 开始上传
'onUploadstarted': function (uploadInfo) {
var accessKeyId = _this.accessKeyId
var accessKeySecret = _this.accessKeySecret
var securityToken = _this.securityToken
_this.uploader.setSTSToken(uploadInfo, accessKeyId, accessKeySecret, securityToken)
console.log(`onUploadStarted:${uploadInfo.file.name},endpoint:${uploadInfo.endpoint}, bucket:${uploadInfo.bucket}, object:${uploadInfo.object}`)
},
'onUploadEnd': function(uploadInfo) {
console.log('onUploadEnd: uploaded all the files')
}
})
}
}
}
</script>
上传成功之后的文件可以去阿里云的视频点播控制台查看,传送门:https://vod.console.aliyun.com/
后台截图:
五、音频上传
音频上传实际上用的就是视频上传那套逻辑,代码也是ctrl+c、ctrl+v过去的,主要改动:
a、把按钮文字“上传视频”改为“上传音频”
b、限制视频格式改为限制音频.mp3格式
<input type="file" v-show="false" accept="video/*" ref="input" @change="fileChange">
改为
<input type="file" v-show="false" accept="audio/mpeg" ref="input" @change="fileChange">
c、js部分
if (!event.target.files[0].type.match('video.*')) {
this.$message.error('请选择视频文件')
return false
}
改为
if (!event.target.files[0].type.match('audio.*')) {
this.$message.error('请选择音频文件')
return false
}
其它都和视频上传一样使用,包括上传成功之后存的地方也是一样的,有图有真相:
完。
------------------------------------------------------------------
2018.12.22 补充更新
如果是移动端应用,需要与客户端通信获取到的是base64的图片资源,如何进行文件转换并上传呢?
请出门右转>>>js接收客户端base64图片转换Blob
------------------------------------------------------------------
2018.12.26 补充更新
本文只是简单地演示了一下上传阿里云的一些功能,具体交互有待优化。
以图片上传为例,可以出门左转>>【上传组件优化】el-upload组件结合上传阿里云OSS实现更优交互