解耦的作用在于如果后面要我改成從阿里云oss上傳文件，我只需要實現上傳邏輯從七牛改成阿里云即可，其他不用動。實現方式有2部分組成，一部分是上傳邏輯，一部分是ui。

上傳邏輯

大概邏輯就是先去服務端拿上傳token和地址，然后用http上傳

import { upload } from "@/api/agent-go";
import { isShowErr } from "..";
import axios from "axios";
import { UploadProgressEvent } from "element-plus";export async function uploadFile(file: File,classType: uploadClassType,onUploadProgress?: (progressEvent: UploadProgressEvent) => void
) {if (!file) throw new Error("上傳文件失敗:缺少file參數");if (!classType) throw new Error("上傳文件失敗:缺少classType參數");const [res, err] = await upload({fileList: [{ classType, name: file.name }],});if (isShowErr(err) || !res.tokenList[0]) throw new Error("獲取token失敗");const token = res.tokenList[0];const formData = new FormData();formData.append("file", file);formData.append("token", token.token);formData.append("key", token.key);const config = {headers: { "Content-Type": "multipart/form-data" },onUploadProgress: function (progressEvent) {// 處理上傳進度const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);progressEvent.percent = percentCompleted;if (onUploadProgress) onUploadProgress(progressEvent);},};const response = await axios.post(res.addr, formData, config);return response.data.key; // 返回上傳的文件key,如果沒有response.data.key,則上傳失敗
}

UI層

關鍵就是重寫http-request用上我們上面寫的上傳邏輯

<template><el-uploadref="uploadRef"style="width: 100%":before-upload="beforeUpload":http-request="filehandleFileUpload":on-exceed="handleExceed":on-preview="handlePreview":limit="limit"v-model:file-list="fileList"drag><el-icon class="el-icon--upload"><upload-filled /></el-icon><div class="el-upload__text"><em>點擊</em>或將文件<em>拖拽</em>到這里上傳<div class="el-upload__tip">{{ text }}</div></div><template #tip> </template><ImageViewer ref="imageViewerRef" /></el-upload>
</template><script setup lang="ts">
import { PropType, ref, watch } from "vue";
import { ElMessage, UploadInstance, genFileId } from "element-plus";
import { uploadFile } from "@/utils/upload";
import {UploadRawFile,UploadRequestOptions,UploadUserFile,
} from "element-plus/es/components";
import { isShowErr } from "@/utils";
import { OssFile, download } from "@/api/agent-go";
import { onMounted } from "vue";
import ImageViewer from "@/components/ImageViewer/index.vue";interface UploadOssFile extends UploadRawFile {ossFileData?: OssFile;
}const props = defineProps({ossFileList: {type: Array as PropType<OssFile[]>,default: () => [],},text: {type: String,default: "請上傳excel文件",},whiteList: {type: Array as PropType<string[]>,default: () => ["xls", "xlsx"],},classType: {type: String as PropType<uploadClassType>,default: "temp",},limit: {type: Number,default: 1,},
});const uploadRef = ref<UploadInstance>();
const fileList = ref<UploadUserFile[]>([]);watch(() => props.ossFileList,() => {setValue(props.ossFileList);},{immediate: true,}
);function setValue(val: OssFile[]) {fileList.value = val.map((item) => {const file = new File([], item.name) as UploadOssFile;file.ossFileData = item;file.uid = genFileId();return {name: item.name,status: "success",raw: file,};});
}const filehandleFileUpload = async (options: UploadRequestOptions) => {const key = await uploadFile(options.file, props.classType, (e) => {options.onProgress(e);});const params: OssFile = {name: options.file.name,size: options.file.size,classType: props.classType,mimeType: options.file.type,key,};const file = options.file as UploadOssFile;if (file.ossFileData) file.ossFileData.key = key;//ossFilemap.set(options.file.uid, params);return params;
};const handleExceed = (files) => {if (props.limit > 1) {if (fileList.value.length >= props.limit) {ElMessage({type: "error",message: `最多上傳${props.limit}個文件, 請刪除后再上傳`,});return false;}return;}uploadRef.value!.handleRemove(fileList.value[0] as UploadRawFile);const file = files[0] as UploadRawFile;file.uid = genFileId();uploadRef.value!.handleStart(file);uploadRef.value!.submit();
};const imageViewerRef = ref();
const handlePreview = async (file) => {try {const fileSuffix = file.name.substring(file.name.lastIndexOf("."))?.toLowerCase();const isPictures = [".jpg", ".jpeg", ".png", ".gif"].includes(fileSuffix);const [res, err] = await download({fileList: [file.raw.ossFileData as OssFile],method: isPictures ? "default" : "download",});if (isShowErr(err)) return;const map = res.urlMap;const urls = Object.keys(map)?.map((key) => map[key]?.url);if (!urls || urls.length === 0)return ElMessage.error("下載文件失敗, 獲取不到文件地址");if (isPictures) {imageViewerRef.value.openViewer(0, urls);} else {// 創建一個隱藏的可下載鏈接const url = urls[0] || "";const link = document.createElement("a");link.href = url;link.setAttribute("download", file.name); // 設置下載后的文件名document.body.appendChild(link);link.click(); // 模擬點擊事件觸發下載document.body.removeChild(link); // 清理臨時元素}} catch (error) {alert("下載文件失敗:" + error);}
};const beforeUpload = (file: UploadOssFile) => {//console.log("beforeUpload", file);file.ossFileData = {name: file.name,size: file.size,classType: props.classType,mimeType: file.type,};const isAnyType = props.whiteList.indexOf("*") != -1;const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);const isSuffix = props.whiteList.indexOf(fileSuffix.toLowerCase()) === -1;const isLt = file.size / 1024 / 1024 > 10;let msg;if (isSuffix && !isAnyType) {msg = "上傳文件只能是 " + props.whiteList.join("，") + " 格式";}if (isLt) {msg = "上傳文件大小不能超過 10MB";}if (msg) {ElMessage({type: "error",message: msg,});return false;}
};function getValue() {const val: OssFile[] = [];let valid = true;fileList.value.forEach((item) => {if (item.status === "uploading" || item.status === "ready") {ElMessage({type: "error",message: "有文件正在上傳中，請稍后再試",});valid = false;return;}if (item.status === "fail") {ElMessage({type: "error",message: "有文件上傳失敗，請重新上傳",});valid = false;return;}const file = item.raw as UploadOssFile;if (file.ossFileData) val.push(file.ossFileData);});if (!valid) {throw new Error("文件上傳中或上傳失敗");}return val;
}defineExpose({getValue,
});
</script>
<style lang="scss" scoped></style>