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实现更优交互