feat(imgHosting): 统一改用s3协议处理，可以兼容更多云厂商

package.json

@@ -20,6 +20,7 @@
     "sizecheck": "npx vite-bundle-visualizer"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.703.0",
     "@ckpack/vue-color": "^1.6.0",
     "@codemirror/commands": "^6.7.1",
     "@codemirror/lang-css": "^6.3.0",
@@ -39,7 +40,6 @@
     "@vueuse/core": "^11.2.0",
     "@vueuse/integrations": "^11.2.0",
     "algoliasearch": "^4.24.0",
-    "ali-oss": "^6.21.0",
     "ant-design-vue": "^4.2.6",
     "axios": "^1.7.7",
     "buffer": "^6.0.3",
@@ -83,7 +83,6 @@
     "@iconify-json/icon-park": "^1.2.1",
     "@iconify-json/icon-park-outline": "^1.2.1",
     "@iconify-json/icon-park-solid": "^1.2.1",
-    "@types/ali-oss": "^6.16.11",
     "@types/crypto-js": "^4.2.2",
     "@types/esri-leaflet": "^3.0.3",
     "@types/file-saver": "^2.0.7",

src/tools/imgHosting/child/settings.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { AliOssConfig } from '../uploader/index'
-import { cloneDeep, merge } from 'lodash-es'
+import type { Config } from '../type'
+import { merge } from 'lodash-es'
 import * as uploaders from '../uploader/index'
 
 const imgHosingStore = useImgHostingStore()
@@ -17,7 +17,7 @@ const customCopyContentType = ref<'standard' | 'markdown' | 'custom'>('standard'
 const customContent = ref('$url')
 
 const currentUploader = ref<'aliyun'>('aliyun')
-const currentConfig = ref<uploaders.Config[]>([])
+const currentConfig = ref<Config[]>([])
 
 onMounted(() => {
   const uploader = useImgHostingStore().uploader
@@ -60,8 +60,9 @@ watch(customContent, (val: string) => {
 })
 
 function changeUploader() {
+  const savedConfig = config(currentUploader.value)
   if (currentUploader.value === 'aliyun') {
-    currentConfig.value = cloneDeep(uploaders[currentUploader.value].config(config(currentUploader.value) as AliOssConfig))
+    currentConfig.value = uploaders[currentUploader.value].config(savedConfig)
   }
 }
 

src/tools/imgHosting/child/upload.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import type { AliOssConfig } from '../uploader/index'
 import * as uploaders from '../uploader/index'
 
 const props = withDefaults(defineProps<{
@@ -37,7 +36,7 @@ async function customRequest(file: File) {
       })
     }
     try {
-      const result = await uploaders[uploader].handle(config(uploader) as AliOssConfig, tmpFile)
+      const result = await uploaders[uploader].handle(config(uploader) as any, tmpFile)
       useImgHostingStore().addImage(result)
       if (commonConfig.copyUrlAfterUpload) {
         try {

src/tools/imgHosting/type.ts

@@ -0,0 +1,28 @@
+export interface Config {
+  name: string
+  type: string
+  default: string
+  required: boolean
+  label: string
+  hint: string
+}
+
+export interface S3Config {
+  accessKeyId: string
+  accessKeySecret: string
+  bucket: string
+  area: string
+  path: string
+  customUrl: string
+  options: string
+  [key: string]: string
+}
+
+export interface Uploader<T = any> {
+  name: string
+  handle: (config: T, file: File) => Promise<{
+    name: string
+    url: string
+  }>
+  config: (options: Partial<T>) => Config[]
+}

src/tools/imgHosting/uploader/aliyun.ts

@@ -1,15 +1,5 @@
-import type { Config } from './index'
-import OSS from 'ali-oss'
-
-export interface AliOssConfig extends Record<string, string> {
-  accessKeyId: string
-  accessKeySecret: string
-  bucket: string
-  area: string
-  path: string
-  customUrl: string
-  options: string
-}
+import type { Config, S3Config, Uploader } from '../type'
+import { PutObjectCommand, S3Client } from '@aws-sdk/client-s3'
 
 /**
  * handle
@@ -24,20 +14,30 @@ export interface AliOssConfig extends Record<string, string> {
  * @param file {File} 文件
  * @return {Promise<object>}
  */
-async function handle(options: AliOssConfig, file: File): Promise<{
+async function handle(options: S3Config, file: File): Promise<{
   name: string
   url: string
 }> {
   const customUrl = options.customUrl
   const path = options.path || ''
-  const client = new OSS({
+  const s3Client = new S3Client({
     region: options.area,
-    accessKeyId: options.accessKeyId,
-    accessKeySecret: options.accessKeySecret,
-    bucket: options.bucket,
+    endpoint: `https://${options.area}.aliyuncs.com`,
+    credentials: {
+      accessKeyId: options.accessKeyId,
+      secretAccessKey: options.accessKeySecret,
+    },
+  })
+  const command = new PutObjectCommand({
+    // 填写Bucket名称。
+    Bucket: options.bucket,
+    // 填写OSS文件完整路径和本地文件的完整路径。OSS文件完整路径中不能包含Bucket名称。
+    Key: path + file.name,
+    // 指定文件内容或Buffer。
+    Body: new Blob([file]),
   })
-  const result = await client.put(path + file.name, new Blob([file]))
-  if (result.res && result.res.status === 200) {
+  try {
+    await s3Client.send(command)
     const optionUrl = options.options || ''
     if (customUrl) {
       return { name: file.name, url: `${customUrl}/${path}${file.name}${optionUrl}` }
@@ -49,15 +49,15 @@ async function handle(options: AliOssConfig, file: File): Promise<{
       }
     }
   }
-  else {
+  catch (error) {
     throw new Error('上传失败')
   }
 }
 
 /**
  * 获取配置
  */
-function config(options = {} as AliOssConfig): Config[] {
+function config(options: Partial<S3Config> = {}): Config[] {
   return [
     {
       name: 'accessKeyId',
@@ -118,7 +118,7 @@ function config(options = {} as AliOssConfig): Config[] {
   ]
 }
 
-export const aliyun = {
+export const aliyun: Uploader<S3Config> = {
   name: '阿里云OSS',
   handle,
   config,

src/tools/imgHosting/uploader/index.ts

@@ -1,10 +1 @@
 export * from './aliyun'
-
-export interface Config {
-  name: string
-  type: string
-  default: string
-  required: boolean
-  label: string
-  hint: string
-}