【上传文件】基于阿里云的视频点播VOD、对象存储OSS实现音视频图片等文件上传_oss vod

一、效果演示

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