首先，下面這些信息從阿里云服務器OSS管理中獲取
aliyun:oss:file:endpoint: "oss-cn-beijing.aliyuncs.com"keyid: "xxxxxxxxx"keysecret: "xxxxxxxxxxxx"bucketname: "xxxx"
一、安裝OSS
npm install ali-oss二、以下步驟中解決引入ts校驗的，有些地方比較多余，想試試也行，直接跳過吧
在 TypeScript 中，如果你遇到“無法找到模塊 'ali-oss' 的聲明文件”的錯誤，通常是因為該模塊沒有提供類型定義文件
解決方法:
1.安裝類型定義:
如果?ali-oss?沒有提供類型定義文件，你可以嘗試安裝?@types/ali-oss，但目前可能沒有可用的類型定義。
npm install --save-dev @types/ali-osspnpm add -D @types/ali-oss如果沒有這個包，你可以手動創建一個類型定義文件。
2.手動創建類型定義:
- 在你的項目中創建一個類型定義文件，例如?src/types/ali-oss.d.ts，并添加以下內容：
declare module 'ali-oss' {export interface OSSClient {put(object: string, file: any, options?: any): Promise<any>;// 添加其他需要的方法和屬性}export default function OSS(options: {region: string;accessKeyId: string;accessKeySecret: string;bucket: string;}): OSSClient;
}
-
更新?tsconfig.json:
- 確保 TypeScript 配置文件 (tsconfig.json) 中包含了類型定義文件的路徑：
{"compilerOptions": {"typeRoots": ["./node_modules/@types","./src/types" // 添加自定義類型位置]}
}
3.擴展:
使用 require:
- 如果你不想定義類型，可以使用?require?來引入模塊，這樣 TypeScript 不會檢查類型：
const OSS = require('ali-oss');總結：通過手動創建類型定義文件或使用?require，可以解決無法找到模塊聲明文件的問題。
擴展:
endpoint
- oss-cn-beijing.aliyuncs.com:
- oss：表示這是 OSS 服務。
- cn：表示中國區域。
- beijing：表示具體的地理區域，即北京。
其他區域示例
如果你有其他的?endpoint，可以根據以下格式進行解析：
- 上海:?
oss-cn-shanghai.aliyuncs.com?->?region: 'cn-shanghai'
- 廣州:?
oss-cn-guangzhou.aliyuncs.com?->?region: 'cn-guangzhou'
- 香港:?
oss-ap-hongkong.aliyuncs.com?->?region: 'ap-hongkong'
確認區域:
如果不確定，可以在阿里云控制臺中查看你的 Bucket 的具體區域，或者查閱阿里云的官方文檔，以獲取更詳細的信息。
三、配置阿里云 OSS:
// 配置阿里云 OSS
// Bucket名稱，用于標識OSS存儲空間
const BUCKET_NAME = 'xxxxx';
// OSS的地域節點，用于訪問OSS服務的域名
const ENDPOINT = 'oss-cn-beijing.aliyuncs.com';// 創建OSS客戶端實例
const client = new OSS({region: 'oss-cn-beijing', // 地域，例如：華北2（北京）accessKeyId: 'xxxxxxxxx', // 訪問密鑰ID，用于身份驗證accessKeySecret: 'xxxxxxxx', // 訪問密鑰密碼bucket: BUCKET_NAME, // 指定操作的Bucketsecure: true, // 使用HTTPS協議cname: false, // 是否使用自定義域名，false表示使用阿里云默認域名
});- secure : 默認為 false ，表示使用 HTTP 協議。不寫的話可能會存在安全風險，建議在生產環境中設置為 true 使用 HTTPS。
- cname : 默認為 false ，表示使用阿里云默認域名。如果不需要自定義域名，可以不寫這個配置。
- timeout : 默認為 60000 （60秒）。如果不寫，上傳超時時間就是默認的 60 秒，對于大多數場景來說已經足夠。
Bucket 名稱:
這個一般是未公開的,所以需要再定一一個在外面,OSS里面那個刪除即可,不需要,也無法使用
- 在對象的外面定義:
const BUCKET_NAME = 'xxxxx'; // 定義 Bucket 名稱,這里換成你自己的????????2.并在需要生成文件 URL 時使用該常量，ENDPOINT同理：
// 生成文件的在線鏈接const url = `https://${BUCKET_NAME}.${ENDPOINT}/${fileName}`;ENDPOINT:
在生成 URL 時，client.options.endpoint?是用于獲取 OSS 訪問地址的一部分。然而，client.options?本身可能并不包含?endpoint?屬性。通常，endpoint?是在創建 OSS 客戶端時指定的配置選項之一，但它并不會直接暴露在?options?中。
可以在創建 OSS 客戶端時直接保存?endpoint，然后在生成 URL 時使用這個值。以下是如何實現的示例代碼：
const ENDPOINT = 'oss-cn-beijing.aliyuncs.com'; // 替換為實際 Endpoint四、上傳文件總流程:
<script setup lang="ts">
import { ref } from 'vue';
import { showToast } from 'vant'; // 導入 Vant 的類型
import type { UploaderFileListItem } from 'vant'; // 正確導入類型
import OSS from 'ali-oss';// 聲明 fileList，類型為 UploaderFilelistItem[]
const fileList = ref<UploaderFileListItem[]>([]);// oversize 事件處理函數
const maxFileSize = 50 * 1024 * 1024; // 50MB
const onOversize = (file: File) => {if (file.size > maxFileSize) {showToast(`文件大小不能超過 ${maxFileSize / (1024 * 1024)}MB`);return false;}return true;
};
// 配置阿里云 OSS
// Bucket名稱，用于標識OSS存儲空間
const BUCKET_NAME = 'xxxxx'; // 替換成實際的
// OSS的地域節點，用于訪問OSS服務的域名
const ENDPOINT = 'oss-cn-beijing.aliyuncs.com';// 創建OSS客戶端實例
const client = new OSS({region: 'oss-cn-beijing', // 地域，例如：華北2（北京）accessKeyId: 'xxxxxxxx', // 訪問密鑰ID，用于身份驗證accessKeySecret: 'xxxxxxx', // 訪問密鑰密碼bucket: BUCKET_NAME, // 指定操作的Bucketsecure: true, // 使用HTTPS協議cname: false, // 是否使用自定義域名，false表示使用阿里云默認域名timeout: 60000 // 超時時間，單位：毫秒（這里設置為60秒）
});
// - secure : 默認為 false ，表示使用 HTTP 協議。不寫的話可能會存在安全風險，建議在生產環境中設置為 true 使用 HTTPS。
// - cname : 默認為 false ，表示使用阿里云默認域名。如果不需要自定義域名，可以不寫這個配置。
// - timeout : 默認為 60000 （60秒）。如果不寫，上傳超時時間就是默認的 60 秒，對于大多數場景來說已經足夠。// 上傳文件的函數
const uploadFile = async (file: File) => {try {// 生成唯一文件名，包含文件夾路徑// 獲取當前日期const timestamp = new Date();const year = timestamp.getFullYear();const month = String(timestamp.getMonth() + 1).padStart(2, '0');const day = String(timestamp.getDate()).padStart(2, '0');const randomString = Math.random().toString(36).substring(2, 8);// 指定上傳路徑let filePath: string; // 添加變量聲明// 判斷文件類型const isImage = file.type.startsWith('image/');if (isImage) {// 添加隨機字符串filePath = `png/${year}/${month}/${day}/${randomString}_${file.name}`;} else {filePath = `video/${year}/${month}/${day}/${randomString}_${file.name}`;}// 上傳文件到 OSS// client.put() 方法會將文件上傳到 OSS，其中：// - filePath 參數指定了文件在 OSS 中的存儲路徑// - file 參數是要上傳的文件對象const result = await client.put(filePath, file);// 生成文件的在線鏈接const url = `https://${BUCKET_NAME}.${ENDPOINT}/${filePath}`;console.log('上傳成功:', result);console.log('文件在線鏈接:', url);return url;} catch (error) {console.error('上傳失敗:', error);return null; // 或者返回一個默認的錯誤鏈接}
};const handleSubmit = async () => {fileList.value.forEach(item => {// 使用類型斷言將 item.file 轉換為 File 類型const file = item.file as File;uploadFile(file)});
};// 提交文件函數
const submitFile = async () => {handleSubmit()
};</script>
<template><div><van-uploader ref="mediaUploader" v-model="fileList" multiple class="uploader-container" accept="image/*,video/*"max-count="6" @oversize="onOversize" /><button @click="submitFile">點擊上傳</button></div>
</template><style scoped>
/* 添加必要的樣式 */
</style>上傳可能出現的問題:
- 如果跨域,這個時候要去服務器配置允許訪問的IP地址,防止出現跨域報錯,這個是需要去官網到自己的服務器去配置的
關鍵點總結:
- 獲取服務器相關配置信息
- 安裝OSS
- 使用自帶的put方法上傳圖片
const result = await client.put(filePath, file);- 圖片路徑就是倉庫路徑拼接的，使用put方法上傳會自動到那個倉庫路徑下去存?
- 服務器需要配置跨域
