fix(file-upload): 优化自定义上传示例的使用方式 (#2694)

Author: chenxi-20

examples/sites/demos/apis/file-upload.js

@@ -304,8 +304,8 @@ export default {
         },
         {
           name: 'http-request',
-          type: '(file: IFile) => Promise<any>',
-          typeAnchorName: 'IFile',
+          type: '(file: ICustomParam) => Promise<any>',
+          typeAnchorName: 'ICustomParam',
           defaultValue: '',
           desc: {
             'zh-CN': '覆盖默认的上传行为，可以自定义上传的实现; 由于 TinyVue 官网为 Mock 上传不能执行上传',
@@ -1059,6 +1059,22 @@ interface IFile {
 }
       `
     },
+    {
+      name: 'ICustomParam',
+      type: 'interface',
+      code: `
+interface ICustomParam {
+  action: string
+  data: IData // 上传时附带的额外参数
+  file: IFile
+  filename: string
+  headers: object // 头部请求信息
+  onError: (error: any) => void // 上传失败回调函数，自定义入参
+  onProgress: (event: any) => void // 上传中回调函数
+  onSuccess: (res: any) => void // 上传成功回调函数
+  withCredentials: boolean // 是否支持发送 cookie 凭证信息
+}`
+    },
     {
       name: 'IEncryptConfig',
       type: 'interface',

examples/sites/demos/pc/app/file-upload/http-request-composition-api.vue

@@ -1,23 +1,26 @@
 <template>
-  <tiny-file-upload ref="uploadRef" :http-request="httpRequest" :file-list="fileList">
+  <tiny-file-upload ref="uploadRef" :http-request="httpRequest" :file-list="fileList" @success="handleSuccess">
     <template #trigger>
       <tiny-button>点击上传</tiny-button>
     </template>
   </tiny-file-upload>
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { reactive } from 'vue'
 import { TinyFileUpload, TinyButton, TinyModal } from '@opentiny/vue'
 
 const fileList = reactive([])
-const httpRequest = ref((files) => {
+const httpRequest = reactive(({ onSuccess, file }) => {
   return new Promise((resolve) => {
     // 此处为用户自定义的上传服务请求
     setTimeout(() => {
-      TinyModal.message('上传成功')
-      fileList.push(files.file)
+      onSuccess('上传成功')
+      this.fileList.push(file)
     }, 500)
   })
 })
+const handleSuccess = (res) => {
+  TinyModal.message(res)
+}
 </script>

examples/sites/demos/pc/app/file-upload/http-request.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-file-upload ref="upload" :http-request="httpRequest" :file-list="fileList">
+  <tiny-file-upload ref="upload" :http-request="httpRequest" :file-list="fileList" @success="handleSuccess">
     <template #trigger>
       <tiny-button>点击上传</tiny-button>
     </template>
@@ -17,16 +17,21 @@ export default {
   data() {
     return {
       fileList: [],
-      httpRequest: (files) => {
+      httpRequest: ({ onSuccess, file }) => {
         return new Promise((resolve) => {
           // 此处为用户自定义的上传服务请求
           setTimeout(() => {
-            TinyModal.message('上传成功')
-            this.fileList.push(files.file)
+            onSuccess('上传成功')
+            this.fileList.push(file)
           }, 500)
         })
       }
     }
+  },
+  methods: {
+    handleSuccess(res) {
+      TinyModal.message(res)
+    }
   }
 }
 </script>