vue上传视频到华为云obs
公司做的后台，需要上传视频，但是视频会非常的大，动不动就到了1G。后端接口上传肯定是非常慢的，公司决定使用华为云直传。
我看到有两种方法一个是npm下载，第二个就是github下载文件引入，今天讲的是第二个
1、下载文件github网络太慢了，我放在我的gitee仓库了点击这里下载—>sdk源码
2、下载好的 esdk-obs-browserjs-without-polyfill.3.22.3.min.js 放在你项目的public下面
3、在项目的html文件引入esdk-obs-browserjs-without-polyfill.3.22.3.min.js
<script src="esdk-obs-browserjs-without-polyfill.3.22.3.min.js">
4、在页面中使用，注意要公司运维或者负责人给你提供access_key_id、secret_access_key、server还有回显的时候用到的回显域名，我项目里的是‘https://download.elibr.cn/’，你要换成你自己的
<template><div><el-upload class="avatar-uploader" action="" accept=".mp4" :http-request="httpRequest"list-type="picture-card" :show-file-list="false"><video v-if="mediaFile" :src="mediaFile" class="avatar video-avatar" controls="controls">您的浏览器不支持视频播放</video><i v-else-if="mediaFile == '' && !videoFlag" slot="default"class="el-icon-plus avatar-uploader-icon"></i><i class="el-icon-delete dels" v-if="mediaFile != '' && !videoFlag"@click.stop="delVideo(index)"></i><el-progress v-if="videoFlag" class="progress" width="100" type="circle":percentage="videoUploadPercent"></el-progress></el-upload><p>仅支持上传MP4格式文件，大小限100M以下</p></div>
</template>
<script>
// 创建ObsClient实例
var obsClient = new ObsClient({access_key_id: '你申请的access_key_id',secret_access_key: '你申请的secret_access_key',server: '你的华为云上传地址',// timeout: 900 // 15分钟timeout: 1200 // 20分钟，这个是设置超时时间，我在本地测试上传1G的视频大概需要15分钟
});
export default {data () {return {videoUploadPercent: 0,videoFlag: false,mediaFile: ''}},methods: {//自定义上传httpRequest (fileObj) {console.log(fileObj, 'fileObj')var fileSize = fileObj.file.size / 1024 / 1024 < 100; //控制大小100Mif (["video/mp4"].indexOf(fileObj.file.type) == -1) {this.$message.warning('仅支持上传MP4格式文件')return false}if (!fileSize) {this.$message.warning('视频大小不能超过100M')return false;}var _this = thisobsClient.putObject({Bucket: 'cloud-library', //桶名，公司运维或者负责人给你提供Key: `${fileObj.file.uid}-${fileObj.file.name}`,SourceFile: fileObj.file,ProgressCallback: function (transferredAmount, totalAmount, totalSeconds) {_this.$nextTick(() => {_this.videoFlag = true_this.videoUploadPercent = Math.floor(transferredAmount * 100.0 / totalAmount)})}}, (err, result) => {if (err) {this.videoFlag = false;this.mediaFile = ''this.videoUploadPercent = 0this.$message.error('上传失败')console.error('Error-->' + err);} else {this.videoFlag = false;this.videoUploadPercent = 0;this.mediaFile = 'https://download.elibr.cn/' + fileObj.file.uid + '-' + encodeURIComponent(fileObj.file.name) //回显的url一定要用encodeURIComponent解析，因为文件名是中文的话是无法回显的console.log(this.mediaFile, '<---这个地址就可以显示你的线上视频了')}});},//删除视频delVideo () {this.mediaFile = ''this.videoFlag = false}}
}
</script>
<style>
.avatar-uploader .el-upload {position: relative;width: 158px;height: 158px;line-height: 158px !important;text-align: center;
}
.avatar-uploader .el-upload:hover {border-color: #409eff;
}
.avatar {width: 158px;height: 158px;display: block;
}
.dels {position: absolute;color: #d7311e !important;font-size: 20px;z-index: 99;top: 6px;right: 6px;
}
.el-progress {margin-top: 29px;
}
</style>5、注意事项
你可能上传的时候会遇到跨域的问题，如下图：
这时候你要跟你的负责人或者公司运维说，配置桶的CORS
（1）、登录OBS Console后在桶列表中，单击待操作的桶，进入“概览”页面；
（2）、在“基础配置”下，单击“CORS规则”卡片，进入“CORS规则”界面，如下图所示：
（3）、在“CORS规则”界面，单击“创建”，系统弹出“创建CORS规则”对话框，在该对话框中按照上表的参数进行配置，如下图所示：
4、点击“确定”后，就配置好了规则，等两分钟你再去上传视频，就不会有跨域的问题了
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！