文件上传

.env

@@ -4,9 +4,7 @@ VITE_APP_NAME=垃圾回收监管平台
 # 服务器基础地址
 VITE_HTTP_SERVER_BASE_URL=/api
 VITE_WS_SERVER_BASE_URL=/ws
-VITE_OSS_BUCKET_NAME=zsy
 VITE_OSS_UPLOAD_BASE_URL=/api/oss/upload
-VITE_OSS_DOWNLOAD_BASE_URL=/api/oss/download
 
 # 接口超时时间
 VITE_HTTP_SERVER_TIMEOUT=10000

.env.development

@@ -4,5 +4,8 @@ VITE_LOG_LEVEL=TRACE
 # 后台服务地址
 # 普通接口地址
 VITE_HTTP_PROXY_TARGET=http://127.0.0.1:10086
+# 上传接口地址
+VITE_OSS_UPLOAD_BASE_URL=https://cdn-zsy.oss-cn-shanghai.aliyuncs.com
+VITE_OSS_UPLOAD_PROXY_TARGET=https://cdn-zsy.oss-cn-shanghai.aliyuncs.com
 # Websocket 地址
 VITE_WS_PROXY_TARGET=ws://127.0.0.1:10086

.env.production

@@ -1,3 +1,4 @@
 # 日志级别 TRACE < DEBUG < INFO <  WARN < ERROR
 VITE_LOG_LEVEL=DEBUG
 
+VITE_OSS_UPLOAD_BASE_URL=https://cdn-zsy.oss-cn-shanghai.aliyuncs.com

src/common/app/app-api.ts

@@ -2,21 +2,21 @@ import {
   get,
   getFileUrl
 } from '@/common/utils/http-util.ts'
-import { bucketName, } from '@/common'
 
 interface PresignedUrl extends Record<string, string | undefined> {
+  url?: string
   bucketName?: string
   objectName?: string
 }
 
 export default {
   obtainPresignedUrl(filename: string) {
-    return get<PresignedUrl>('/oss/obtain_presigned_url', {filename, bucketName})
+    return get<PresignedUrl>('/oss/obtain_presigned_url', {filename})
   },
   download(objectName: string) {
     return get('/oss/download/' + objectName)
   },
   fileUrl(filename: string) {
-    return getFileUrl(filename)
+    return getFileUrl('/oss/download' + filename)
   }
 }

src/common/index.ts

@@ -12,9 +12,7 @@ export const appName = import.meta.env.VITE_APP_NAME
  * 服务器基础地址
  */
 export const serverBaseUrl = import.meta.env.VITE_HTTP_SERVER_BASE_URL ?? '/'
-export const downloadBaseUrl = import.meta.env.VITE_OSS_DOWNLOAD_BASE_URL ?? '/'
+export const uploadBaseUrl = import.meta.env.VITE_OSS_UPLOAD_BASE_URL ?? ''
-export const bucketName = import.meta.env.VITE_OSS_BUCKET_NAME ?? 'zsy'
-export const uploadBaseUrl = (import.meta.env.VITE_OSS_UPLOAD_BASE_URL ?? '') + '/' + bucketName
 
 /**
  * Axios 超时时间

src/common/utils/http-util.ts

@@ -1,5 +1,4 @@
 import {
-  downloadBaseUrl,
   serverBaseUrl,
   serverTimeout
 } from '@/common'
@@ -254,9 +253,9 @@ export function download(url: string, params?: any, disposeErr: boolean = true)
       })
 }
 
-export function getFileUrl(filename: string) {
+export function getFileUrl(path: string) {
   const appUserStore = useAppUserStore()
-  return downloadBaseUrl + filename + '?authorization=' + appUserStore.token
+  return serverBaseUrl + path + '?authorization=' + appUserStore.token
 }
 
 export default {

src/components/input-upload/InputUpload.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { useAccessorAndControl } from '@idux/cdk/forms'
+import { useFormItemRegister } from '@idux/components/form'
+import { uploadBaseUrl } from '@/common'
+import {
+  UploadFile,
+  UploadRequestHandler,
+  UploadRequestOption
+} from '@idux/components/upload/src/types'
+import { UploadRequestChangeOption } from '@idux/components'
+import AppApi from '@/common/app/app-api.ts'
+import Toast from '@/components/toast'
+
+defineProps<{
+  control?: string | number | (string | number)[] | object
+  disabled?: boolean
+  value?: string | string[]
+}>()
+const {control: controlRef} = useAccessorAndControl()
+useFormItemRegister(controlRef)
+
+const files = ref<UploadFile[]>()
+
+function requestData({name, raw}: UploadFile) {
+  if (raw == null) return Promise.reject()
+  return AppApi.obtainPresignedUrl(name)
+      .then(res => res.data)
+}
+
+function customRequest(options: UploadRequestOption<any>): Promise<UploadRequestHandler | void> | UploadRequestHandler | void {
+  console.log(options)
+  return Promise.resolve()
+}
+
+let loading: string | null = null
+
+function showMsg({status}: UploadRequestChangeOption) {
+  if (status === 'loadstart') {
+    loading = Toast.loading('正在上传')
+  } else if (status === 'loadend') {
+    if (loading != null) Toast.close(loading)
+    Toast.success('上传成功')
+  } else if (status === 'error') {
+    if (loading != null) Toast.close(loading)
+    Toast.error('上传失败')
+  } else if (status === 'abort') {
+    if (loading != null) Toast.close(loading)
+  }
+}
+</script>
+
+<template>
+  <IxUpload
+      v-model:files="files"
+      :action="uploadBaseUrl"
+      :custom-request="customRequest"
+      :max-count="1"
+      :progress="{
+      strokeColor: {
+        '0%': '#108EE9',
+        '100%': '#87D068',
+      },
+      strokeWidth: 3,
+    }"
+      :request-data="requestData"
+      @request-change="showMsg"
+  >
+    <IxButton>上传头像</IxButton>
+    <template #list>
+      <IxUploadFiles :icon="{file: 'paper-clip', remove: 'close', retry: 'redo'}" type="image"/>
+    </template>
+  </IxUpload>
+</template>
+
+<style lang="stylus" scoped>
+
+</style>

src/components/input-upload/input-upload-api.ts

@@ -0,0 +1,10 @@
+import { get, } from '@/common/utils/http-util.ts'
+import { uploadBaseUrl } from '@/common'
+
+export default {
+  upload() {
+  },
+  getFile(fileName: string) {
+    return get(uploadBaseUrl + fileName)
+  }
+}

src/components/input-upload/input-upload.d.ts

@@ -0,0 +1,9 @@
+export {}
+declare global {
+  namespace InputUploadTypes {
+    interface UploadParams {
+      url?: string
+      file: File
+    }
+  }
+}

src/dts/components.d.ts

@@ -13,6 +13,7 @@ declare module 'vue' {
     District: typeof import('./../components/district/District.vue')['default']
     Funbar: typeof import('./../components/fun-bar/Funbar.vue')['default']
     Iconfont: typeof import('./../components/iconfont/Iconfont.vue')['default']
+    InputUpload: typeof import('./../components/input-upload/InputUpload.vue')['default']
     IxAvatar: typeof import('@idux/components/avatar')['IxAvatar']
     IxButton: typeof import('@idux/components/button')['IxButton']
     IxButtonGroup: typeof import('@idux/components/button')['IxButtonGroup']

src/dts/vite-env.d.ts

@@ -7,9 +7,9 @@ interface ImportMetaEnv {
   readonly VITE_APP_NAME: string
   readonly VITE_APP_BASE_URL: string
   readonly VITE_HTTP_SERVER_BASE_URL: string
+  readonly VITE_HTTP_PROXY_TARGET: string
   readonly VITE_OSS_UPLOAD_BASE_URL: string
-  readonly VITE_OSS_DOWNLOAD_BASE_URL: string
+  readonly VITE_OSS_UPLOAD_PROXY_TARGET: string
-  readonly VITE_OSS_BUCKET_NAME: string
   readonly VITE_SERVER_TIMEOUT: string
   readonly VITE_LOG_LEVEL: string
 }

src/pages/main-zone/header-bar/UserInfo.vue

@@ -90,6 +90,7 @@ function showMsg({status}: UploadRequestChangeOption) {
     if (loading != null) Toast.close(loading)
     Toast.success('上传成功')
   } else if (status === 'error') {
+
     if (loading != null) Toast.close(loading)
     Toast.error('上传失败')
   } else if (status === 'abort') {

vite.config.ts

@@ -86,11 +86,16 @@ let viteConfig: UserConfigFnObject = configEnv => {
       host: '0.0.0.0',
       port: 80,
       proxy: {
-        [env.VITE_OSS_UPLOAD_BASE_URL]: {
+        /*         [env.VITE_OSS_UPLOAD_BASE_URL]: {
           proxyTimeout: 10000,
-          target: 'http://localhost:9000',
+         target: env.VITE_OSS_UPLOAD_PROXY_TARGET,
-          rewrite: path => env.VITE_OSS_UPLOAD_BASE_URL == null || env.VITE_OSS_UPLOAD_BASE_URL == '/' ? path : path.replace(new RegExp(env.VITE_OSS_UPLOAD_BASE_URL), ''),
+         // target: 'http://cdn-zsy.oss-cn-shanghai.aliyuncs.com',
-        } as ProxyOptions,
+         rewrite: path => {
+         const s = env.VITE_OSS_UPLOAD_BASE_URL == null || env.VITE_OSS_UPLOAD_BASE_URL == '/' ? path : path.replace(new RegExp(env.VITE_OSS_UPLOAD_BASE_URL), '')
+         console.log('-----------', '[', s, ']', path)
+         return s
+         },
+         } as ProxyOptions, */
         [env.VITE_HTTP_SERVER_BASE_URL]: {
           proxyTimeout: 10000,
           target: env.VITE_HTTP_PROXY_TARGET,