1.需求
最近我们公司在做一个官网涉及到图片视频上传的问题,时间比较紧急(实际后端想偷懒),就让我直传视频到阿里云的oss上。我一听,也是一脸懵,人在家中坐,锅从天上来。话不多说,我直冲度娘,网上的案例真的是非常的多,眼花缭乱,我也试了几个发现都是有问题的,又联系不到博主,最终我还是放弃了,干脆自己搞一个吧,经过三天三夜的奋战(其实是一晚上)!所以分享出来给各位小伙伴们,希望早日脱坑!
先上效果图
2.阿里oss的安装
npm install ali-oss --save
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 = val console.info('woc',url); if (val.res.statusCode === 200) { option.onSuccess(val); return val; } else { option.onError("上传失败"); } }, err => { option.onError("上传失败"); reject(err); } ); }); }); }};
4.在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;};
5.vue页面中的使用
上传视频文件,且不超过500mb
6.js中的代码
7.css代码
8.总结
我在这里讲一下需要注意的几点:
1.这个我没有贴出阿里云的一些配置,自己可以问问度娘,网上有很多资料,注意跨域的配置就行。
2.这样做的优点就是不用和后端交互,图片直传到你阿里云的oss然后返回链接,不需要后端的传值,省去了很多和后端人员联调的时间,大大提高了开发的效率。
代码我已经都贴出来了,样式的话可以自己改,这个是可以根据自己的需求来更改的,如果还有什么问题的话,欢迎留言评论!