aliyun:
    oss:
        file:
            endpoint: "oss-cn-beijing.aliyuncs.com"
            keyid: "xxxxxxxxx"
            keysecret: "xxxxxxxxxxxx"
            bucketname: "xxxx"

npm install ali-oss

npm install --save-dev @types/ali-oss

pnpm add -D @types/ali-oss

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;
}

{
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types",
      "./src/types"  // 添加自定義類型位置
    ]
  }
}

const OSS = require('ali-oss');

// 配置阿里云 OSS
// Bucket名稱，用于標識OSS存儲空間
const BUCKET_NAME = 'xxxxx';
// OSS的地域節(jié)點，用于訪問OSS服務的域名
const ENDPOINT = 'oss-cn-beijing.aliyuncs.com';

// 創(chuàng)建OSS客戶端實例
const client = new OSS({
  region: 'oss-cn-beijing',    // 地域，例如：華北2（北京）
  accessKeyId: 'xxxxxxxxx',      // 訪問密鑰ID，用于身份驗證
  accessKeySecret: 'xxxxxxxx',  // 訪問密鑰密碼
  bucket: BUCKET_NAME,         // 指定操作的Bucket
  secure: true,               // 使用HTTPS協(xié)議
  cname: false,              // 是否使用自定義域名，false表示使用阿里云默認域名
});

const BUCKET_NAME = 'xxxxx'; // 定義 Bucket 名稱,這里換成你自己的

// 生成文件的在線鏈接

const url = `https://${BUCKET_NAME}.${ENDPOINT}/${fileName}`;

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 事件處理函數(shù)
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的地域節(jié)點，用于訪問OSS服務的域名
const ENDPOINT = 'oss-cn-beijing.aliyuncs.com';

// 創(chuàng)建OSS客戶端實例
const client = new OSS({
  region: 'oss-cn-beijing',    // 地域，例如：華北2（北京）
  accessKeyId: 'xxxxxxxx',      // 訪問密鑰ID，用于身份驗證
  accessKeySecret: 'xxxxxxx',  // 訪問密鑰密碼
  bucket: BUCKET_NAME,         // 指定操作的Bucket
  secure: true,               // 使用HTTPS協(xié)議
  cname: false,              // 是否使用自定義域名，false表示使用阿里云默認域名
  timeout: 60000             // 超時時間，單位：毫秒（這里設置為60秒）
});
// - secure : 默認為 false ，表示使用 HTTP 協(xié)議。不寫的話可能會存在安全風險，建議在生產(chǎn)環(huán)境中設置為 true 使用 HTTPS。
// - cname : 默認為 false ，表示使用阿里云默認域名。如果不需要自定義域名，可以不寫這個配置。
// - timeout : 默認為 60000 （60秒）。如果不寫，上傳超時時間就是默認的 60 秒，對于大多數(shù)場景來說已經(jīng)足夠。

// 上傳文件的函數(shù)
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 參數(shù)指定了文件在 OSS 中的存儲路徑
    //   - file 參數(shù)是要上傳的文件對象
    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 轉(zhuǎn)換為 File 類型
    const file = item.file as File;
    uploadFile(file)
  });
};


// 提交文件函數(shù)
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>

const result = await client.put(filePath, file);