最近再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-beijing.aliyuncs.com
const client = new OSS({
  region: process.env.VUE_APP_OSS_REGION,//格式：oss-cn-beijing
  accessKeyId: 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/20220211/20220211.jpg
      //ossPath这个方法返回的就是--oss-img-path/20220211/20220211.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=true
      uploadOss(file.file,'oss-img-path').then(res=>{
        //这里即可拿到oss上传后的结果
        console.log(res,'oss上传');
      })
    },
</script>

重要文件就是这些，相当简单，拿来即用。。。