vue ali-oss 视频上传封装组件

注册阿里云oss 账号地址（https://www.aliyun.com/）
创建Bucket

3.设置Bucket （允许跨域）

4. 生产accessKeyId 和 accessKeySecret

5. 创建vue项目，并安装ali-oss

npm install ali-oss  --save  或者 cnpm install ali-oss  --save

6.单文件上传简易示例代码如下：

<template><div><el-uploadclass="avatar-uploader"action="":http-request="beginUpload":show-file-list="false"><img v-if="imageUrl" :src="data:imageUrl" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload><el-progress :percentage="Number(percentage.toFixed(2))"></el-progress><el-button @click="pauseUpload">暂停</el-button><el-button @click="goonUpload">继续</el-button></div>
</template><script>
import OSS from 'ali-oss'
export default {components: {},data () {return {imageUrl: '',percentage: 0,checkpoint: null,client: null,filename: ''}},computed: {},created () {this.client = new OSS({region: 'oss-cn-hangzhou',accessKeyId: '<Your AccessKeyId>',accessKeySecret: '<Your AccessKeySecret>',bucket: 'Your bucket name',secure: false})},methods: {async ossUpload (filename, file) {let _this = thistry {let result = await _this.client.multipartUpload(filename, file, {progress: async function (p, checkpoint) {_this.checkpoint = checkpoint_this.percentage = p * 100},checkpoint: _this.checkpoint})console.log(result)} catch (e) {console.log(e)}},beginUpload (file) {let _this = thislet filename = file.file.namefilename = filename.split('.')[0] + '_' + new Date().getTime() + '.' + filename.split('.')[1]_this.file = file_this.filename = filename_this.ossUpload(filename, file.file)},pauseUpload () {this.client.cancel()},goonUpload () {let file = this.filelet _this = this_this.ossUpload(_this.filename, file.file)}}
}
</script>

7.多文件、多类型，异步上传（暂未封装完整）

<template><div id="upload-cp"><a href="javascript:;" class="file">选择文件<input type="file" :multiple="multiple" :accept="acceptType" id="uploadFile" @change="getFile($event)" /></a><p v-if="isCount">选择了<span>{{file.length}}</span>个文件</p><el-button class="uploadBtn" :disabled="disabled" @click="upload" type="primary">上传</el-button></div>
</template><script>
/* eslint-disable */
import OSS from "ali-oss"
export default {name: "Upload",props:{// 是否支持多文件上传multiple:{type: Boolean,default: true},// 文件上传的个数限制limitCount:{type: Number,default: 1,},// 文件上传的接受的类型  video/* :视频类型， image/*：图片，根据需要判断acceptType:{type: String,default: 'video/*',},// 存放到 阿里云oss 对应的文件  video:视频， image: 图片， adjunct: 附件storeType:{type: String,default: 'video',}},data () {return {client: null,loading: null,file: null,isCount: false,disabled: false,minW: 5,             // 视频最小宽度maxW: 1000000,       // 视频最大宽度minH: 5,             // 视频最小长度      maxH: 100000,        // 视频最大长度minSize: 0.1,        // 视频文件最大值maxSize: 5000,       // 视频文件最小值minDurate: 0.1,      // 视频时长最小值maxDurate: 1000,     // 视频时长最大值fileInfo: [],     // 上传oss成功后的返回值videoLists: [],   // 创建视频videoSize: [],    // 视频大小videoRatio: [],   // 视频分辨率videoDurate: [],  // 视频时长}},created () {this.client = new OSS({region: 'oss-cn-hangzhou',accessKeyId: '<Your AccessKeyId>',accessKeySecret: '<Your AccessKeySecret>',bucket: 'Your bucket name',secure: false})},mounted () {},methods: {// 开始动画startLoading () {this.loading = this.$loading({lock: true,text: '上传中...',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'})},// 结束动画endLoading(){this.loading.close()},// 获取文件路径getObjectURL (file) {let url = nullif (window.createObjcectURL != undefined) {url = window.createOjcectURL(file)} else if (window.URL != undefined) {url = window.URL.createObjectURL(file)} else if (window.webkitURL != undefined) {url = window.webkitURL.createObjectURL(file)}return url},// 选择文件getFile (event) {this.disabled = falsethis.file = event.target.filesfor(let i = 0; i < this.file.length; i++){let video = document.createElement('video')video.setAttribute('controls', 'controls')video.setAttribute('src', this.getObjectURL(this.file[i]))this.videoLists.push(video)this.videoSize.push(this.file[i].size / 1024 / 1024)}this.isCount = true},// 随机random_string(len) {len = len || 32;let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz12345678', maxPos = chars.length, pwd = '';for (let i = 0; i < len; i++) {pwd += chars.charAt(Math.floor(Math.random() * maxPos));}return pwd;},// 日期getDate(){const date = new Date()let year = date.getFullYear()let month = date.getMonth() > 9 ? date.getMonth() + 1 : `0${date.getMonth() + 1}`let day = date.getDate() > 9 ? date.getDate() : `0${date.getDate()}`return `${this.storeType}/${year}${month}${day}/`},// 上传upload () {if(!this.file) return this.$message.error('请上传文件')if(this.limitCount != this.file.length) return this.$message.error(`请上传${this.limitCount}个文件`)// 这样需要根据 上传文件的类型进行再一次的封装，因为我这是以视频上传为主。后续进行完善this.videoLists.map(item => {this.videoDurate.push(item.duration)this.videoRatio.push({h:item.videoHeight,w:item.videoWidth})})// 判断视频大小let sizeBolean = this.videoSize.find((item) => {return item < this.minSize || item > this.maxSize})// 判断视频时长let durationBolean = this.videoDurate.find((item) => {return  item < this.minDurate || item > this.maxDurate})// 判断视频分辨率let raidoBolean = this.videoRatio.find((item) => {return item.w < this.minW || item.w > this.maxWif(this.minW < item.w && item.w > this.maxW) {return item.h < this.minH || item.w > this.maxH} })if(sizeBolean) return this.$message.error('视频只能上传0.5M ~ 50M')if(durationBolean) return this.$message.error('视频时长只能上传1 ~ 10分钟')if(raidoBolean) return  this.$message.error('视频分辨率不合适')  this.disabled = true    this.submitFile()},// 提交到oss服务器submitFile(){this.startLoading()const len = this.file.length let uploadLength = 0for (let i = 0; i < len; i++) {let file = this.file[i];let headerInfo = this.random_string(6) + '_' + new Date().getTime() + '.' + file.name.split('.').pop();let storeAs = this.getDate() + headerInfothis.client.multipartUpload(storeAs, file, {// 特别说明，这个地方需要设置，不然视频无法用浏览器的方式下载，只能播放。headers: { 'Content-Disposition': headerInfo }}).then((res) => {uploadLength++if (uploadLength === len) {this.endLoading()this.$message({message: `您成功上传了${len}文件`,type: 'success'});// 上传成功的后得到阿里云 文件路径， 回调保存到自己服务器中，为下载或者在线播放做下一步操作this.$emit('uploadDone', this.fileInfo);}this.fileInfo.push(res.name)}).catch((err) => {this.endLoading()this.$message.error('网络错误，请稍后再试试！')console.log(err);});}}}
};
</script><style lang="scss" scoped>
#upload-cp{display: flex;flex-direction: row;align-items: center;.file {position: relative;display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 0px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;font-size: 16px;}.file input {position: absolute;font-size: 16px;right: 0;top: 0;opacity: 0;height: 40px;}.file:hover {background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;}p{font-size: 14px;margin-left: 10px;span{color:red;}}.uploadBtn{margin-left: 50px;}
}
</style>

说明：因为采用的是原生的input type=file方式，进而对样式进行了优化。可根据自己
需要进行调整。效果如下：

vue ali-oss 视频上传封装组件相关推荐

阿里云oss视频上传后,如何获取视频封面
前言:在阿里云oss视频上传后,我们如何获取视频封面呢?而不是通过上传方式获取封面.其实OSS本身提供了视频截帧功能 OSS提供的视频截帧功能和OSS图片服务功能使用的方式是类似的,都是通过传入x-o ...
uniapp做小程序的图片(视频)上传的组件封装
最近在做小程序,最后想试试新不同的技术,所以选择了用uniapp做小程序. 要求实现多张图片的上传 ,可以限制图片上传的数量,图片预览,多次使用对图片的上传顺序排序 <template>& ...
OSS视频上传后直接播放只有声音没有画面
原因:OSS作为存储服务,不对音视频文件进行任何处理,但Web浏览器支持解码常见的音视频文件.通过Web浏览器访问OSS中的音视频资源时,Web浏览器对该音视频资源进行解码并播放.如果该视频文件为MP ...
vue大文件(视频)上传解决方案
文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...
微信小程序视频上传组件直接上传至阿里云OSS
一.微信小程序视频上传组件示例多视频上传功能,直传OSS,可以直接从OSS删除:组织接受以逗号分隔的视频url地址,自动列出多个视频,但点击上传按钮上传视频后,同样返回以逗号分隔的视频url地址. ...
封装一个完整版的uniapp图片和视频上传组件，拿来即用，可进行图片视频切换，可自定义上传按钮样式，删除按钮样式，可单独上传图片或者视频，可限制上传数量
第一步 components里面新建一个manyImgUpload.vue组件,将以下代码放入以下代码中需要你改的地方 uni.uploadFile中的参数,url为你公司的上传接口.files为你 ...
vue 视频上传组件
组件: <template><div class="upload-box"><div class="avatar-uploader-box& ...
阿里云VOD 视频点播(二)、VUE视频上传，视频播放
一,VUE视频上传 (1),视频上传引入的js文件,在index.html文件里面引入js,如下图 js文件在官网可以下载然后放在自己的项目里面,下载下面的js文件引入项目 JavaScript上传S ...
在vue中使用wangEditor上传视频
一.效果展示实现效果原本效果二.修改wangEditor源码添加插入视频panel 只修改Video.prototype._createPanel方法 // 原型 Video.prototyp ...

vue ali-oss 视频上传封装组件

vue ali-oss 视频上传封装组件相关推荐

最新文章

热门文章