1 配置OSS

可以看阿里云文档
ps:记得配置跨域

2 引入依赖

pnpm install ali-oss -save

3 上传核心代码

import OSS from "ali-oss";
import dayjs from "dayjs"; // 引入时间组件
import { buildUUID } from "@pureadmin/utils";
import { getStsToken } from "@/api/common/oss";
const BUCKET_PREFIX = "XXX";
// 获取不同文件类型bucket
const OSS_BUCKET_OBJECT = {image: BUCKET_PREFIX + "-image",audio: BUCKET_PREFIX + "-audio",video: BUCKET_PREFIX + "-video1",application: BUCKET_PREFIX + "-file",other: BUCKET_PREFIX + "-upload"
};
// 分片的大小
const SHARD_SIZE = 5;
// 文件大小阈值，主要区分直接上传和分片上传
const FILE_SIZE_THRESHOLD = 50;
type configType = {accessKeyId: string;accessKeySecret: string;bucket: string;expiration: string;region: string;token: string;stsToken: string;
};
let config: configType = undefined;
// 对文件进行上传
export async function uploadFile(file, progressCallback = () => {}) {// progressCallback 三个参数 (进度, 断点信息, 返回值)// 校验传入的对象是否正确if (!file || Object.prototype.toString.call(file) !== "[object File]") {throw new Error("参数不正确");}// 根据约定和相关规则进行参数配置const ossConfig: configType = await getOssConfig();ossConfig.bucket = getBucket(file);ossConfig.stsToken = ossConfig.token;const environment = `/${import.meta.env.VITE_LOGOGRAM}`;const pathName = `${environment}/${dayjs().format("YYYY-MM-DD")}/`;const fileName = `${buildUUID()}.${file.name.split(".").at(-1)}`;// 实例化OSS对象const client = new OSS(ossConfig);try {const fileSize = file.size / 1024 / 1024;// 根据文件大小选择上传的方式if (fileSize > FILE_SIZE_THRESHOLD) {const option = {partSize: 1024 * 1024 * SHARD_SIZE,parallel: Math.ceil(fileSize / SHARD_SIZE),progress: progressCallback};const result = await client.multipartUpload(pathName + fileName,file,option);return `/${result.name}`;} else {const result = await client.put(pathName + fileName, file);return `/${result.name}`;}} catch (e) {return Promise.reject(e);}
}// 获取后端返回的临时凭证，并根据时间判断凭证是否过期
export async function getOssConfig() {if (config?.expiration && dayjs().isBefore(dayjs(config.expiration))) {return config;} else {const { data } = await getStsToken();config = data as configType;return data;}
}// 根据文件类型获取不同的bucket
function getBucket(file) {const bucket = OSS_BUCKET_OBJECT[file.type.split("/")[0]];if (bucket) return bucket;else return OSS_BUCKET_OBJECT["other"];
}

4 文件回显

// 访问协议
const AGREEMENT = "https://";
// 获取不同文件类型的访问地址
const SERVER_ADDRESS = {image: "img.xxx.xxx.com",audio: "audio.xxx.xxx.com",video: "video.xxx.xxx.com",application: "file.xxx.xxx.com",other: "upload.xxx.xxx.com"
};
export const imageRegex = RegExp(/(jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga)/);
export const audioRegex = RegExp(/(mp3|wav|flac|ogg|aac|wma)/);
export const videoRegex = RegExp(/(avi|wmv|mpeg|mp4|m4v|mov|asf|flv|f4v|rmvb|rm|3gp|vob)/
);
export const applicationRegex = RegExp(/(doc|docx|xls|xlsx|ppt|pptx|pdf|txt|apk|zip)/
);
export function preview(pathName) {const suffix = pathName.split(".").at(-1);let type = "other";if (imageRegex.test(suffix)) type = "image";if (audioRegex.test(suffix)) type = "audio";if (videoRegex.test(suffix)) type = "video";if (applicationRegex.test(suffix)) type = "application";return `${AGREEMENT}${SERVER_ADDRESS[type]}${pathName}`;
}
deoRegex.test(suffix)) type = "video";if (applicationRegex.test(suffix)) type = "application";return `${AGREEMENT}${SERVER_ADDRESS[type]}${pathName}`;
}