最近再vue开发的h5项目遇到一个上传图片缓慢的问题，于是采用oss直传的方式解决上传大文件或图片慢的问题，废话不多说，请看代码：
首选我们要安装一个阿里oss组件：阿里云oss配置完毕 vue安装oss组件
npm install ali-oss
const OSS = require('ali-oss')/*** oss 直传* @param {文件流：我使用的是vant上传组件拿到的file文件流} file * @param {oss文件夹的名字} fileType * @returns /** @type {*} *///oss服务器的配置--在控制台可以获取到的（由于正式和测试的参数是不一样的，所以我统一放到环境变量管理起来）const headerUrl=process.env.VUE_APP_OSS_URL;//https://lalalala.oss-cn-const client = new OSS({region: process.env.VUE_APP_OSS_REGION,//格式：oss-cn-beijingaccessKeyId: process.env.VUE_APP_OSS_ACCESSKEY_ID,//oss控制台可以获取的accessKeySecret: process.env.VUE_APP_OSS_ACCESSKEY_SECRET,//oss控制台可以获取的bucket: process.env.VUE_APP_OSS_BUCKET//lalalala});//这个就是主要方法了，我是直接封装了一个方法export const uploadOss= function (file,fileType){let picList=[];let promise = new Promise(function(resolve, reject) {// ossPath是构造的一个oss服务器的路径,打比方要构造一个叫oss-img-path/2021/2021.jpg//ossPath这个方法返回的就是--oss-img-path/2021/2021.jpg的结果let imgUrl=ossPath(file,fileType)client.multipartUpload(imgUrl, file).then(function(result) {picList.push({url:headerUrl + '/'+imgUrl,path:imgUrl});resolve(picList);}).catch(function(err) {console.log(err);reject(err);});});return promise}/*** oss 文件格式 这个是项目中构建的存储图片的路径格式 */const ossPath = function (file,fileType) {let date = new Date();let year = date.getFullYear(),month = ("0" + (date.getMonth() + 1)).slice(-2),day = ("0" + date.getDate()).slice(-2);let imgType = file.name.substr(file.name.lastIndexOf("."));//获取图片类型let str = year+month+day+getRandomNum(10000, 99999);let ossImgPath = (fileType?fileType:"default-path")+'/'+ year + month + day + '/' + str + imgType;return ossImgPath;};// 随机数function getRandomNum(Min, Max) {var Range = Max - Min;var Rand = Math.random();return (Min + Math.round(Rand * Range));}
下面看一下方法调用
<template><van-uploader v-else :after-read="afterRead" :before-read="beforeRead"><div class="upladSlot"><div class="icon-upload"></div></div></van-uploader></template><script>//接上面那段引入进来import {uploadOss} from '@/utils/tool.js'// 上传凭证afterRead(file) {this.uploadLoading=trueuploadOss(file.file,'oss-img-path').then(res=>{//这里即可拿到oss上传后的结果console.log(res,'oss上传');})},</script>
重要文件就是这些，相当简单，拿来即用。。。
