vue 直接上传视频到阿里云oss

1.安装oss

npm install ali-oss --save

2.在src下的util文件创建utils.js工具类

 /*** 时间日期格式化* @param format* @returns {*}*/
export const dateFormat = function(dateObj, format) {const date = {"M+": dateObj.getMonth() + 1,"d+": dateObj.getDate(),"h+": dateObj.getHours(),"m+": dateObj.getMinutes(),"s+": dateObj.getSeconds(),"q+": Math.floor((dateObj.getMonth() + 3) / 3),"S+": dateObj.getMilliseconds()};if (/(y+)/i.test(format)) {format = format.replace(RegExp.$1,(dateObj.getFullYear() + "").substr(4 - RegExp.$1.length));}for (const k in date) {if (new RegExp("(" + k + ")").test(format)) {format = format.replace(RegExp.$1,RegExp.$1.length === 1? date[k]: ("00" + date[k]).substr(("" + date[k]).length));}}return format;
};

3.封装oss通用上传js工具类

 "use strict";
import { dateFormat } from './utils.js'var OSS = require("ali-oss");
let url='';export default {/*** 创建随机字符串* @param num* @returns {string}*/randomString(num) {const chars = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];let res = "";for (let i = 0; i < num; i++) {var id = Math.ceil(Math.random() * 35);res += chars[id];}return res;},/*** 创建oss客户端对象* @returns {*}*/createOssClient() {return new Promise((resolve, reject) => {const client = new OSS({region: "XXXXX", // 请设置成你的accessKeyId: "XXXXX", // 请设置成你的accessKeySecret: "XXXXX", // 请设置成你的bucket: "XXXXX", // 请设置成你的secure: true // 上传链接返回支持https});resolve(client);});},/*** 文件上传* @param option 参考csdn: https://blog.csdn.net/qq_27626333/article/details/81463139*/ossUploadFile(option) {const file = option.file;const self = this;// var url = '';return new Promise((resolve, reject) => {const date = dateFormat(new Date(), "yyyyMMdd"); // 当前时间const dateTime = dateFormat(new Date(), "yyyyMMddhhmmss"); // 当前时间const randomStr = self.randomString(4); //  4位随机字符串const extensionName = file.name.substr(file.name.indexOf(".")); // 文件扩展名const fileName ="video/" + date + "/" + dateTime + "_" + randomStr + extensionName; // 文件名字（相对于根目录的路径 + 文件名）// 执行上传self.createOssClient().then(client => {// 异步上传,返回数据resolve({fileName: file.name,fileUrl: fileName});// 上传处理// 分片上传文件client.multipartUpload(fileName, file, {progress: function(p) {const e = {};e.percent = Math.floor(p * 100);// console.log('Progress: ' + p)option.onProgress(e);}}).then(val => {window.url = valconsole.info('woc',url);if (val.res.statusCode === 200) {option.onSuccess(val);return val;} else {option.onError("上传失败");}},err => {option.onError("上传失败");reject(err);});});});}
};

4.页面

 <template><div><el-form :model="form" label-width="80px" size="small"><el-form-item label="上传视频"><el-upload  class="upload-demo" action="":http-request="fnUploadRequest":show-file-list="true":limit=1:on-exceed="beyondFile":on-success="handleVideoSuccess":before-upload="beforeUploadVideo"><div tabindex="0" class="el-upload-video"><i class="el-upload-video-i el-icon-plus avatar-uploader-icon"></i></div><div class="el-upload__tip" slot="tip">上传视频文件，且不超过500mb</div></el-upload><el-input type="textarea" rows="5" v-model="urls"></el-input></el-form-item></el-form></div>
</template><script>import oss from '../../util/oss.js'export default {data: function() {return {form: {status: true},url:[],urls:''}},methods: {/*** @description [fnUploadRequest 覆盖默认的上传行为，实现自定义上传]* @param    {object}   option [上传选项]* @return   {null}   [没有返回]*/async fnUploadRequest(option) {oss.ossUploadFile(option);},// 视频上传beforeUploadVideo(file) {// todo},// 视频上传成功后handleVideoSuccess(response, file, fileList) {console.log('url',window.url);console.log('url',window.url.res.requestUrls);this.url = window.url.res.requestUrls;console.log('3322',this.url.length)for(var i = 0;i<this.url.length;i++){console.log('href',this.url[i])this.urls = this.url[i].split('?')[0]console.log('jjjj',this.url)}// todo},// 视频添加多个视频文件事件beyondFile(files, fileList) {},}}
</script>
<style lang="less" scoped>.el-upload-video {width: 100px;height: 100px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}.el-upload-video-i{font-size: 36px;padding-top: 25px;color: #8c939d;width: 50px;height: 50px;line-height: 50px;text-align: center;}
</style>

5.oss 权限设置跨域设置

记录一下可以查看原文章

vue 直接上传视频到阿里云oss相关推荐

批量上传视频到阿里云
批量上传视频到阿里云这段时间项目里有一个上传视频到阿里云的功能是我来负责写的,之前一直没有写过这种功能,感觉很难的亚子,但是后来仔细研究了一遍发现也没想象中那么难,最后经过不懈的努力也算是搞出来了哈 ...
上传视频到阿里云服务器
######上传视频到阿里云服务器工具类 1.maven坐标 <dependency><groupId>com.aliyun</groupId><artifa ...
微信小程序直接上传文件到阿里云OSS组件封装
微信小程序直接上传文件到OSS 1. 封装公共方法在根目录utils目录新建一个upload文件夹: // utils/upload/base64.jsvar base64EncodeChars = ...
java上传文件至阿里云oss工具类
第一步:引入oss maven坐标 <dependency><groupId>com.aliyun.oss</groupId><artifactId>a ...
vue项目中上传文件到阿里云oss方法
上传背景介绍在项目需求中,关于图片.视频.文件等上传文件,一般不是直接放置在自己的后台服务器上,一般都会购买云服务进行存储.譬如阿里云的oss对象存储. 那么,前端开发项目中,涉及到上传的功能时,我 ...
vue + elementUI upload组件，前端上传视频到阿里云视频点播
1.视频上传阿里云,首先引用阿里云的sdk,放在所需界面中引用 import '@/utils/aliyun-oss-sdk-6.13.0.min.js';import '@/utils/aliyun ...
Springboot上传视频到阿里云（视频点播）和aliyun-java-sdk-vod依赖报红问题
一.pom.xm中导入依赖 <dependency><groupId>com.aliyun</groupId><artifactId>aliyun-ja ...
前端上传视频至阿里云
1.开通阿里云服务,获取userId 官方文档地址:https://help.aliyun.com/document_detail/52204.html?spm=a2c4g.11186623.6.91 ...
vue 上传文件至阿里云oss
先让后端在阿里云里面处理跨域问题参考这篇文章 vue直传图片到阿里云OSS(单张直接上传)__小郑有点困了的博客-CSDN博客_vue 阿里云背景:近期项目使用到多图片上传功能,常规的调用后端接 ...

vue 直接上传视频到阿里云oss

vue 直接上传视频到阿里云oss相关推荐

最新文章

热门文章