oss 直传

分片上传

admin/src/components/upload/index.vue

@@ -9,6 +9,7 @@
             :show-file-list="false"
             :headers="headers"
             :data="data"
+            :http-request="useDirect ? httpRequest : undefined"
             :on-progress="handleProgress"
             :on-success="handleSuccess"
             :on-exceed="handleExceed"
@@ -41,7 +42,7 @@
 </template>
 
 <script lang="ts">
-import type { ElUpload } from 'element-plus'
+import type { ElUpload, UploadRequestOptions } from 'element-plus'
 import { computed, defineComponent, ref, shallowRef } from 'vue'
 
 import config from '@/config'
@@ -49,6 +50,10 @@ import { RequestCodeEnum } from '@/enums/requestEnums'
 import useAppStore from '@/stores/modules/app'
 import useUserStore from '@/stores/modules/user'
 import feedback from '@/utils/feedback'
+import {
+    DirectUploadFallbackError,
+    uploadVideoDirectToCos
+} from '@/utils/oss-direct-upload'
 
 export default defineComponent({
     components: {},
@@ -77,6 +82,11 @@ export default defineComponent({
         showProgress: {
             type: Boolean,
             default: false
+        },
+        // 视频直传到 OSS（绕开服务器中转，仅 type=video 生效）
+        direct: {
+            type: Boolean,
+            default: false
         }
     },
     emits: ['change', 'error', 'success', 'allSuccess'],
@@ -92,6 +102,9 @@ export default defineComponent({
         const visible = ref(false)
         const fileList = ref<any[]>([])
 
+        // 仅 video + direct 时才接管 http-request
+        const useDirect = computed(() => props.direct && props.type === 'video')
+
         const handleProgress = () => {
             visible.value = true
         }
@@ -142,12 +155,73 @@ export default defineComponent({
                     return '*'
             }
         })
+
+        // 走 COS 直传：成功时模拟老接口的响应 envelope，失败/降级时回到默认 XHR
+        const httpRequest = async (options: UploadRequestOptions) => {
+            visible.value = true
+            try {
+                const data = await uploadVideoDirectToCos({
+                    file: options.file,
+                    type: 'video',
+                    cid: Number((options.data as any)?.cid ?? 0),
+                    onProgress(info) {
+                        // 触发 ElUpload 内部进度（保持与默认上传一致的体验）
+                        ;(options as any).onProgress?.({
+                            percent: info.percent,
+                            loaded: info.loaded,
+                            total: info.total
+                        })
+                    }
+                })
+                ;(options as any).onSuccess?.({ code: RequestCodeEnum.SUCCESS, msg: 'ok', data })
+            } catch (err: any) {
+                if (err instanceof DirectUploadFallbackError) {
+                    feedback.msgWarning('当前存储不支持直传，已切换为普通上传')
+                    await defaultXhrUpload(options)
+                    return
+                }
+                ;(options as any).onError?.(err instanceof Error ? err : new Error(String(err?.message ?? err)))
+            }
+        }
+
+        // 当 STS 不可用时，回退到 ElUpload 原生 XHR 行为（POST /upload/{type}）
+        const defaultXhrUpload = (options: UploadRequestOptions) =>
+            new Promise<void>((resolve) => {
+                const xhr = new XMLHttpRequest()
+                xhr.open('POST', action.value)
+                Object.entries(headers.value).forEach(([k, v]) => xhr.setRequestHeader(k, String(v ?? '')))
+                xhr.upload.onprogress = (e) => {
+                    if (!e.lengthComputable) return
+                    const percent = (e.loaded / e.total) * 100
+                    ;(options as any).onProgress?.({ percent, loaded: e.loaded, total: e.total })
+                }
+                xhr.onload = () => {
+                    try {
+                        const json = JSON.parse(xhr.responseText)
+                        ;(options as any).onSuccess?.(json)
+                    } catch (e) {
+                        ;(options as any).onError?.(new Error('上传响应解析失败'))
+                    }
+                    resolve()
+                }
+                xhr.onerror = () => {
+                    ;(options as any).onError?.(new Error('网络错误'))
+                    resolve()
+                }
+                const formData = new FormData()
+                formData.append('file', options.file)
+                Object.entries(options.data || {}).forEach(([k, v]) => formData.append(k, String(v)))
+                xhr.send(formData)
+            })
+
         return {
             uploadRefs,
             action,
             headers,
             visible,
             fileList,
+            useDirect,
+            httpRequest,
             getAccept,
             handleProgress,
             handleSuccess,