docs(file-upload): [file-upload] Optimize documents based on user needs (#1194)

* docs(file-upload): [file-upload] Optimize documents based on user needs * docs(file-upload): [file-upload] Test problem optimization
2023-12-22 14:45:08 +08:00 · 2023-12-22 14:45:08 +08:00 · f5b0351814
parent a76aff0b7d
commit f5b0351814
22 changed files with 185 additions and 224 deletions
--- a/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue
+++ b/examples/sites/demos/mobile/app/file-upload/custom-upload-tip.vue
@ -3,7 +3,7 @@
    <template #trigger>
      <icon-upload></icon-upload>
    </template>
-    <template #tip> 只能上传jpg/png文件，且不超过500kb </template>
+    <template #tip> 只能上传 jpg/png 文件，且不超过500 kb </template>
  </tiny-file-upload>
 </template>

--- a/examples/sites/demos/pc/app/file-upload/abort-quest-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/abort-quest-composition-api.vue
@ -16,7 +16,7 @@ const action = ref('http://localhost:3000/api/upload')
 const uploadRef = ref()

 function cancelUpload() {
-  Modal.message('手动取消上传')
+  Modal.message({ message: '手动取消上传', status: 'info' })
  uploadRef.value.abort()
 }
 </script>
--- a/examples/sites/demos/pc/app/file-upload/abort-quest.vue
+++ b/examples/sites/demos/pc/app/file-upload/abort-quest.vue
@ -23,7 +23,7 @@ export default {
  },
  methods: {
    cancelUpload() {
-      Modal.message('手动取消上传')
+      Modal.message({ message: '手动取消上传', status: 'info' })
      this.$refs.upload.abort()
    }
  }
--- a/examples/sites/demos/pc/app/file-upload/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/file-upload/basic-usage.spec.ts
@ -5,13 +5,13 @@ test('基本用法', async ({ page }) => {
  await page.goto('file-upload#basic-usage')

  const upload = page.getByRole('button', { name: '点击上传' })
-  const lists = page.locator('.tiny-upload-list__item')
+  const lists = page.locator('.tiny-upload-list__li')
  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])

  const path = require('node:path')
  const currentPath = path.resolve(__dirname, '测试.jpg')

  await fileChooser.setFiles(currentPath)
-  await expect(lists).toHaveCount(1)
+  await page.getByText('测试.jpg').isVisible()
  await expect(lists).toHaveText('测试.jpg按 delete 键可删除')
 })
--- a/examples/sites/demos/pc/app/file-upload/before-upload-limit-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/before-upload-limit-composition-api.vue
@ -1,5 +1,5 @@
 <template>
-  <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :before-upload="beforeUpload">
+  <tiny-file-upload ref="uploadRef" :action="action" :file-list="fileList" :before-upload="beforeAvatarUpload">
    <template #trigger>
      <tiny-button type="primary">选取文件</tiny-button>
    </template>
@ -18,11 +18,19 @@ const fileList = ref([
  }
 ])

-function beforeUpload(file) {
+function beforeAvatarUpload(file) {
  return new Promise((resolve, reject) => {
-    Modal.confirm(`确定要上传 ${file.name}？`).then((res) => {
-      res === 'confirm' ? resolve() : reject()
-    })
+    const isJPG = file.type === 'image/jpeg'
+    const isLt2M = file.size / 1024 / 1024 < 2
+    const allow = isJPG && isLt2M
+
+    if (!allow) {
+      Modal.confirm(`自定义提示：《${file.name}》文件不合规范，文件类型或大小超出限制，确定要上传吗？`).then((res) => {
+        res === 'confirm' ? resolve() : reject()
+      })
+    } else {
+      resolve()
+    }
  })
 }
 </script>
--- a/examples/sites/demos/pc/app/file-upload/before-upload-limit.spec.ts
+++ b/examples/sites/demos/pc/app/file-upload/before-upload-limit.spec.ts
@ -1,8 +1,8 @@
 import { test, expect } from '@playwright/test'

-test('阻止上传文件', async ({ page }) => {
+test('定义上传前限制', async ({ page }) => {
  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('file-upload#prevent-upload-file')
+  await page.goto('file-upload#before-upload-limit')

  const upload = page.getByRole('button', { name: '选取文件' })
  const modal = page.locator('.tiny-modal').nth(1)
@ -12,12 +12,17 @@ test('阻止上传文件', async ({ page }) => {

  const path = require('node:path')
  const currentPath = path.resolve(__dirname, '测试.jpg')
+  const exceedFilePath = path.resolve(__dirname, 'before-upload-limit.vue')

  await expect(lists).toHaveCount(1)
-  await expect(lists).toHaveText(/test1/)
+  await page.getByText('test1').isVisible()
+  await page.getByText('测试.jpg').isVisible()
  await fileChooser.setFiles(currentPath)
+  await page.getByText('测试.jpg').isVisible()
+
+  await fileChooser.setFiles(exceedFilePath)
  await modal.waitFor({ state: 'attached', timeout: 100 })
  await modalCancel.click()
  await expect(lists).toHaveCount(1)
-  await expect(lists).toHaveText(/test1/)
+  await page.getByText('test1').isVisible()
 })
--- a/examples/sites/demos/pc/app/file-upload/before-upload-limit.vue
+++ b/examples/sites/demos/pc/app/file-upload/before-upload-limit.vue
@ -1,5 +1,5 @@
 <template>
-  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :before-upload="beforeUpload">
+  <tiny-file-upload ref="upload" :action="action" :file-list="fileList" :before-upload="beforeAvatarUpload">
    <template #trigger>
      <tiny-button type="primary">选取文件</tiny-button>
    </template>
@ -26,11 +26,21 @@ export default {
    }
  },
  methods: {
-    beforeUpload(file) {
+    beforeAvatarUpload(file) {
      return new Promise((resolve, reject) => {
-        Modal.confirm(`确定要上传 ${file.name}？`).then((res) => {
-          res === 'confirm' ? resolve() : reject()
-        })
+        const isJPG = file.type === 'image/jpeg'
+        const isLt2M = file.size / 1024 / 1024 < 2
+        const allow = isJPG && isLt2M
+
+        if (!allow) {
+          Modal.confirm(`自定义提示：《${file.name}》文件不合规范，文件类型或大小超出限制，确定要上传吗？`).then(
+            (res) => {
+              res === 'confirm' ? resolve() : reject()
+            }
+          )
+        } else {
+          resolve()
+        }
      })
    }
  }
--- a/examples/sites/demos/pc/app/file-upload/custom-upload-tip-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/custom-upload-tip-composition-api.vue
@ -4,7 +4,7 @@
      <tiny-button type="primary">选取文件</tiny-button>
    </template>
    <template #tip>
-      <div class="tiny-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+      <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过500 kb</div>
    </template>
  </tiny-file-upload>
 </template>
--- a/examples/sites/demos/pc/app/file-upload/custom-upload-tip.spec.ts
+++ b/examples/sites/demos/pc/app/file-upload/custom-upload-tip.spec.ts
@ -6,5 +6,5 @@ test('自定义上传提示', async ({ page }) => {

  const tip = page.locator('.tiny-upload__tip')

-  await expect(tip).toHaveText('只能上传jpg/png文件，且不超过500kb')
+  await expect(tip).toHaveText('只能上传 jpg/png 文件，且不超过500 kb')
 })
--- a/examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue
+++ b/examples/sites/demos/pc/app/file-upload/custom-upload-tip.vue
@ -4,7 +4,7 @@
      <tiny-button type="primary">选取文件</tiny-button>
    </template>
    <template #tip>
-      <div class="tiny-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+      <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过500 kb</div>
    </template>
  </tiny-file-upload>
 </template>
--- a/examples/sites/demos/pc/app/file-upload/form-validation-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/form-validation-composition-api.vue
@ -20,7 +20,7 @@
          <tiny-button type="primary">选取文件</tiny-button>
        </template>
        <template #tip>
-          <div class="tiny-upload__tip">只能上传jpg/png文件</div>
+          <div class="tiny-upload__tip">只能上传 jpg/png 文件</div>
        </template>
      </tiny-file-upload>
    </tiny-form-item>
@ -65,6 +65,9 @@ const rules = reactive({
 const uploadSuccess = () => {
  // 模拟上传成功后，返回的数据信息,以此通过validatePass的校验
  createData.files = `https://res.hc-cdn.com/tiny-vue-web-doc/3.10.5.20230903162611/static/images/book.jpg`
+
+  // 上传成功后再进行表单验证
+  formValidate()
 }

 const beforeUpload = (file) => {
@ -72,21 +75,24 @@ const beforeUpload = (file) => {
  uploadSuccess()
 }

-const handleSubmit = () => {
+const formValidate = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      Modal.alert('校验通过')
    } else {
-      Modal.message({ message: '校验不通过！！', status: 'warning' })
+      Modal.message({ message: '校验不通过', status: 'warning' })
      return false
    }
  })
 }

+const handleSubmit = () => {
+  formValidate()
+}
+
 const handleRemove = (file) => {
  const index = fileList.findIndex((item) => item.name === file.name)
  fileList.splice(index, 1)
-  console.log('fileList', fileList)
  createData.files = ''
 }
 </script>
--- a/examples/sites/demos/pc/app/file-upload/form-validation.vue
+++ b/examples/sites/demos/pc/app/file-upload/form-validation.vue
@ -21,7 +21,7 @@
            <tiny-button type="primary">选取文件</tiny-button>
          </template>
          <template #tip>
-            <div class="tiny-upload__tip">只能上传jpg/png文件</div>
+            <div class="tiny-upload__tip">只能上传 jpg/png 文件</div>
          </template>
        </tiny-file-upload>
      </tiny-form-item>
@ -67,21 +67,27 @@ export default {
    uploadSuccess() {
      // 模拟上传成功后，返回的数据信息,以此通过validatePass的校验
      this.createData.files = `https://res.hc-cdn.com/tiny-vue-web-doc/3.10.5.20230903162611/static/images/book.jpg`
+
+      // 上传成功后再进行表单验证
+      this.formValidate()
    },
    beforeUpload(file) {
      this.fileList.push({ name: file.name, url: file.url })
      this.uploadSuccess()
    },
-    handleSubmit() {
+    formValidate() {
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          Modal.alert('校验通过')
        } else {
-          Modal.message({ message: '校验不通过！！', status: 'warning' })
+          Modal.message({ message: '校验不通过', status: 'warning' })
          return false
        }
      })
    },
+    handleSubmit() {
+      this.formValidate()
+    },
    handleRemove(file) {
      const index = this.fileList.findIndex((item) => item.name === file.name)
      this.fileList.splice(index, 1)
--- a/examples/sites/demos/pc/app/file-upload/upload-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-events-composition-api.vue
@ -36,34 +36,34 @@ const fileList = ref([
 ])

 function handleRemove() {
-  Modal.message('触发删除文件回调事件')
+  Modal.message({ message: '触发删除文件回调事件', status: 'info' })
 }

 function handlePreview(file) {
-  Modal.message(file.url)
+  Modal.message({ message: file.url, status: 'info' })
 }

 function progressEvent() {
-  Modal.message('文件上传时的回调 返回进程')
+  Modal.message({ message: '文件上传时的回调 返回进程', status: 'loading' })
 }

 function errorEvent() {
-  Modal.message('文件上传失败回调')
+  Modal.message({ message: '文件上传失败回调', status: 'error' })
 }

 function handleExceed() {
-  Modal.message('触发文件超出个数限制回调事件')
+  Modal.message({ message: '触发文件超出个数限制回调事件', status: 'warning' })
 }

 function handleAvatarSuccess() {
-  Modal.message('触发上传文件成功回调事件')
+  Modal.message({ message: '触发上传文件成功回调事件', status: 'success' })
 }

 function handleChange() {
-  Modal.message('触发上传文件改变回调事件')
+  Modal.message({ message: '触发上传文件改变回调事件', status: 'info' })
 }

 function handleHashProgress() {
-  Modal.message('文件上传生成hash值时的回调 返回进程')
+  Modal.message({ message: '文件上传生成hash值时的回调 返回进程', status: 'info' })
 }
 </script>
--- a/examples/sites/demos/pc/app/file-upload/upload-events.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-events.vue
@ -44,28 +44,28 @@ export default {
  },
  methods: {
    handleRemove() {
-      Modal.message('触发删除文件回调事件')
+      Modal.message({ message: '触发删除文件回调事件', status: 'info' })
    },
    handlePreview(file) {
-      Modal.message(file.url)
+      Modal.message({ message: file.url, status: 'info' })
    },
    progressEvent() {
-      Modal.message('文件上传时的回调 返回进程')
+      Modal.message({ message: '文件上传时的回调 返回进程', status: 'loading' })
    },
    errorEvent() {
-      Modal.message('文件上传失败回调')
+      Modal.message({ message: '文件上传失败回调', status: 'error' })
    },
    handleExceed() {
-      Modal.message('触发文件超出个数限制回调事件')
+      Modal.message({ message: '触发文件超出个数限制回调事件', status: 'warning' })
    },
    handleAvatarSuccess() {
-      Modal.message('触发上传文件成功回调事件')
+      Modal.message({ message: '触发上传文件成功回调事件', status: 'success' })
    },
    handleChange() {
-      Modal.message('触发上传文件改变回调事件')
+      Modal.message({ message: '触发上传文件改变回调事件', status: 'info' })
    },
    handleHashProgress() {
-      Modal.message('文件上传生成hash值时的回调 返回进程')
+      Modal.message({ message: '文件上传生成hash值时的回调 返回进程', status: 'info' })
    }
  }
 }
--- a/examples/sites/demos/pc/app/file-upload/upload-limit-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-limit-composition-api.vue
@ -1,22 +0,0 @@
-<template>
-  <tiny-file-upload :action="action" :before-upload="beforeAvatarUpload">
-    <tiny-button type="primary">点击上传</tiny-button>
-  </tiny-file-upload>
-</template>
-
-<script setup lang="jsx">
-import { ref } from 'vue'
-import { FileUpload as TinyFileUpload, Button as TinyButton, Modal as TinyModal } from '@opentiny/vue'
-
-const action = ref('http://localhost:3000/api/upload')
-
-function beforeAvatarUpload(file) {
-  const isJPG = file.type === 'image/jpeg'
-  const isLt2M = file.size / 1024 / 1024 < 2
-  const allow = isJPG && isLt2M
-
-  !allow && TinyModal.alert('自定义提示：该文件不合规范，文件类型或大小超出限制')
-
-  return allow
-}
-</script>
--- a/examples/sites/demos/pc/app/file-upload/upload-limit.spec.ts
+++ b/examples/sites/demos/pc/app/file-upload/upload-limit.spec.ts
@ -1,20 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('上传前限制', async ({ page }) => {
-  page.on('pageerror', (exception) => expect(exception).toBeNull())
-  await page.goto('file-upload#upload-limit')
-
-  const upload = page.getByRole('button', { name: '点击上传' })
-  const lists = page.locator('.tiny-upload-list__item')
-  const [fileChooser] = await Promise.all([page.waitForEvent('filechooser'), upload.click()])
-
-  const path = require('node:path')
-  const path1 = path.resolve(__dirname, '测试.jpg')
-  const path2 = path.resolve(__dirname, '测试.svg')
-  const path3 = path.resolve(__dirname, '测试.png')
-
-  fileChooser.setFiles(path1)
-  fileChooser.setFiles(path2)
-  fileChooser.setFiles(path3)
-  await expect(lists).toHaveCount(0)
-})
--- a/examples/sites/demos/pc/app/file-upload/upload-limit.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-limit.vue
@ -1,32 +0,0 @@
-<template>
-  <tiny-file-upload :action="action" :before-upload="beforeAvatarUpload">
-    <tiny-button type="primary">点击上传</tiny-button>
-  </tiny-file-upload>
-</template>
-
-<script lang="jsx">
-import { FileUpload, Button, Modal as TinyModal } from '@opentiny/vue'
-
-export default {
-  components: {
-    TinyFileUpload: FileUpload,
-    TinyButton: Button
-  },
-  data() {
-    return {
-      action: 'http://localhost:3000/api/upload'
-    }
-  },
-  methods: {
-    beforeAvatarUpload(file) {
-      const isJPG = file.type === 'image/jpeg'
-      const isLt2M = file.size / 1024 / 1024 < 2
-      const allow = isJPG && isLt2M
-
-      !allow && TinyModal.alert('自定义提示：该文件不合规范，文件类型或大小超出限制')
-
-      return allow
-    }
-  }
-}
-</script>
--- a/examples/sites/demos/pc/app/file-upload/upload-request-composition-api.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-request-composition-api.vue
@ -30,7 +30,7 @@ const headers = ref({
 })

 function beforeUpload() {
-  Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+  Modal.message({ message: '查看请求头示例请打开浏览器开发者工具 network 的 upload 请求', status: 'info' })

  return true
 }
--- a/examples/sites/demos/pc/app/file-upload/upload-request.vue
+++ b/examples/sites/demos/pc/app/file-upload/upload-request.vue
@ -38,7 +38,7 @@ export default {
  },
  methods: {
    beforeUpload() {
-      Modal.message('查看请求头示例请打开浏览器开发者工具 network 的 upload 请求')
+      Modal.message({ message: '查看请求头示例请打开浏览器开发者工具 network 的 upload 请求', status: 'info' })

      return true
    }
--- a/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js
+++ b/examples/sites/demos/pc/app/file-upload/webdoc/file-upload.js
@ -12,16 +12,6 @@ export default {
      },
      'codeFiles': ['basic-usage.vue']
    },
-    {
-      'demoId': 'custom-trigger',
-      'name': { 'zh-CN': '触发源插槽', 'en-US': 'Trigger source slot' },
-      'desc': {
-        'zh-CN': '通过 <code>trigger</code> 插槽自定义文件选择触发源的内容，有触发文件选项框弹出的功能。',
-        'en-US':
-          'Select the content of the trigger source through the <code>trigger</code> slot customization file, and there is a function to pop up the trigger file option box.'
-      },
-      'codeFiles': ['custom-trigger.vue']
-    },
    {
      'demoId': 'disabled',
      'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
@ -31,15 +21,6 @@ export default {
      },
      'codeFiles': ['disabled.vue']
    },
-    {
-      'demoId': 'accept-file-image',
-      'name': { 'zh-CN': '限制文件类型', 'en-US': 'Restrict file types' },
-      'desc': {
-        'zh-CN': '通过 <code>accept</code> 设置限制上传文件的格式。',
-        'en-US': 'Limit the format of uploaded files by setting <code>accept</code> .'
-      },
-      'codeFiles': ['accept-file-image.vue']
-    },
    {
      'demoId': 'multiple-file',
      'name': { 'zh-CN': '文件多选', 'en-US': 'Multiple file selection' },
@ -60,25 +41,35 @@ export default {
      'codeFiles': ['manual-upload.vue']
    },
    {
-      'demoId': 'upload-file-list',
-      'name': { 'zh-CN': '文件列表', 'en-US': 'Uploaded file list' },
+      'demoId': 'accept-file-image',
+      'name': { 'zh-CN': '限制文件类型', 'en-US': 'Restrict file types' },
      'desc': {
-        'zh-CN':
-          '通过 <code>file-list</code> 设置上传的文件列表，也可通过 <code>:show-file-list="false"</code> 关闭列表的显示； <code>open-download-file</code> 设置文件是否可下载。',
-        'en-US':
-          'Set the list of uploaded files through <code>file-list</code> , or turn off the display of the list through <code>: show-file-list="false"</code> ; <code>open-download-file</code> Set whether the file is downloadable.'
+        'zh-CN': '通过 <code>accept</code> 设置限制上传文件的格式。',
+        'en-US': 'Limit the format of uploaded files by setting <code>accept</code> .'
      },
-      'codeFiles': ['upload-file-list.vue']
+      'codeFiles': ['accept-file-image.vue']
    },
    {
-      'demoId': 'upload-file-list-slot',
-      'name': { 'zh-CN': '定义文件列表', 'en-US': 'Custom file list' },
+      'demoId': 'max-file-count',
+      'name': { 'zh-CN': '最大上传数', 'en-US': 'Maximum number of uploads' },
      'desc': {
-        'zh-CN': '通过 <code>name</code> 设置上传的文件字段名， <code>file</code> 插槽自定义文件列表。',
+        'zh-CN':
+          '通过 <code>limit</code> 设置限制上传文件的个数， <code>is-hidden</code> 设置达到最大上传数时是否隐藏上传按钮。',
        'en-US':
-          'Set the field name of the uploaded file through <code>name</code> , and customize the file list for the <code>file</code> slot.'
+          'Set a limit on the number of uploaded files by <code>limit</code> , and <code>is-hidden</code> whether to hide the upload button when the maximum number of uploads is reached.'
      },
-      'codeFiles': ['upload-file-list-slot.vue']
+      'codeFiles': ['max-file-count.vue']
+    },
+    {
+      'demoId': 'before-upload-limit',
+      'name': { 'zh-CN': '自定义上传前限制', 'en-US': 'Custom pre upload restrictions' },
+      'desc': {
+        'zh-CN':
+          '通过 <code>before-upload</code> 执行上传文件前的操作，对文件类型和大小做限制，返回 <code>false</code> 或 <code>reject</code> 则阻止上传。',
+        'en-US':
+          'Use<code>before-upload</code>to perform the operation before uploading a file, and limit the file type and size , and return <code>false</code> or <code>reject</code> to block the upload.'
+      },
+      'codeFiles': ['before-upload-limit.vue']
    },
    {
      'demoId': 'prevent-delete-file',
@ -91,20 +82,9 @@ export default {
      },
      'codeFiles': ['prevent-delete-file.vue']
    },
-    {
-      'demoId': 'prevent-upload-file',
-      'name': { 'zh-CN': '阻止上传文件', 'en-US': 'Prevent upload files' },
-      'desc': {
-        'zh-CN':
-          '通过 <code>before-upload</code> 执行上传文件前的操作，返回 <code>false</code> 或 <code>reject</code> 则阻止上传。',
-        'en-US':
-          'Perform the operation before uploading the file by <code>before-upload</code> , and return <code>false</code> or <code>reject</code> to block the upload.'
-      },
-      'codeFiles': ['prevent-upload-file.vue']
-    },
    {
      'demoId': 'upload-request',
-      'name': { 'zh-CN': '请求头部配置', 'en-US': 'Request header configuration' },
+      'name': { 'zh-CN': '定义请求头部', 'en-US': 'Custom request header' },
      'desc': {
        'zh-CN':
          '通过 <code>headers</code> 配置上传请求头部信息， <code>with-credentials</code> 设置允许发送 cookie 凭证信息。',
@ -157,24 +137,25 @@ export default {
      'codeFiles': ['http-request.vue']
    },
    {
-      'demoId': 'upload-limit',
-      'name': { 'zh-CN': '上传前限制', 'en-US': 'Custom upload restrictions' },
-      'desc': {
-        'zh-CN': '通过 <code>before-upload</code> 设置上传前事件回调，对文件类型和大小做限制。',
-        'en-US': 'Set pre upload event callbacks through <code>before-upload</code> to limit file types and sizes.'
-      },
-      'codeFiles': ['upload-limit.vue']
-    },
-    {
-      'demoId': 'max-file-count',
-      'name': { 'zh-CN': '最大上传数', 'en-US': 'Maximum number of uploads' },
+      'demoId': 'upload-file-list',
+      'name': { 'zh-CN': '文件列表', 'en-US': 'Uploaded file list' },
      'desc': {
        'zh-CN':
-          '通过 <code>limit</code> 设置限制上传文件的个数， <code>is-hidden</code> 设置达到最大上传数时是否隐藏上传按钮。',
+          '通过 <code>file-list</code> 设置上传的文件列表，也可通过 <code>:show-file-list="false"</code> 关闭列表的显示； <code>open-download-file</code> 设置文件是否可下载。',
        'en-US':
-          'Set a limit on the number of uploaded files by <code>limit</code> , and <code>is-hidden</code> whether to hide the upload button when the maximum number of uploads is reached.'
+          'Set the list of uploaded files through <code>file-list</code> , or turn off the display of the list through <code>: show-file-list="false"</code> ; <code>open-download-file</code> Set whether the file is downloadable.'
      },
-      'codeFiles': ['max-file-count.vue']
+      'codeFiles': ['upload-file-list.vue']
+    },
+    {
+      'demoId': 'upload-file-list-slot',
+      'name': { 'zh-CN': '定义文件列表', 'en-US': 'Custom file list' },
+      'desc': {
+        'zh-CN': '通过 <code>name</code> 设置上传的文件字段名， <code>file</code> 插槽自定义文件列表。',
+        'en-US':
+          'Set the field name of the uploaded file through <code>name</code> , and customize the file list for the <code>file</code> slot.'
+      },
+      'codeFiles': ['upload-file-list-slot.vue']
    },
    {
      'demoId': 'picture-card',
@ -189,7 +170,7 @@ export default {
    },
    {
      'demoId': 'file-picture-card',
-      'name': { 'zh-CN': '照片墙的预览、下载、删除', 'en-US': 'Preview, download, and delete photo walls' },
+      'name': { 'zh-CN': '定义照片墙列表', 'en-US': 'Custom photo wall list' },
      'desc': {
        'zh-CN':
          '通过 <code>downloadFile</code> 实例方法实现下载功能， <code>handleRemove</code> 实例方法实现删除功能。',
@ -208,19 +189,6 @@ export default {
      },
      'codeFiles': ['picture-list.vue']
    },
-    {
-      'demoId': 'upload-events',
-      'name': { 'zh-CN': '事件', 'en-US': 'Event' },
-      'desc': {
-        'zh-CN': `<div class="tip custom-block"><code>preview</code> 监听文件点击事件；<br/> <code>remove</code> 监听文件移除事件；<br/> <code>error</code> 监听文件上传失败事件；<br/>
-          <code>exceed</code> 监听文件超出个数限制事件；<br/> <code>progress</code> 监听文件上传过程事件；<br/> <code>change</code> 监听文件改变事件（文件改变涵盖文件添加、上传成功和上传失败）；<br/>
-          <code>success</code> 监听文件上传成功事件；<br/> <code>hash-progress</code> 监听文件上传生成hash值事件。</div>`,
-        'en-US': `<div class="tip custom-block"><code>preview</code> Listen for file click events; <br /> <code>remove</code> Listen for file removal events; <br /> <code>error</code> Listen for file upload failure events;<br />
-        <code>exceeded</code> Listen for events where the number of files exceeds the limit; <br/> <code>progress</code> Listen for file upload process events;<br/> <code>change</code> Listen for file change events (file changes include file addition, successful upload, and failed upload);<br />
-        <code>success</code> Listen for file upload success events;<br/> <code>hash-progress</code> Listen for file upload to generate hash value events.</div>`
-      },
-      'codeFiles': ['upload-events.vue']
-    },
    {
      'demoId': 'clear-files',
      'name': { 'zh-CN': '手动清空列表', 'en-US': 'Manually clear the list' },
@ -241,17 +209,6 @@ export default {
      },
      'codeFiles': ['abort-quest.vue']
    },
-    {
-      'demoId': 'custom-upload-tip',
-      'name': { 'zh-CN': '定义上传提示', 'en-US': 'Customized Upload Prompt' },
-      'desc': {
-        'zh-CN':
-          '通过 <code>tip</code> 插槽自定义上传提示， <code>re-uploadable</code> 启用重新上传功能， <code>re-upload-tip</code> 自定义重新上传提示的左侧文字。',
-        'en-US':
-          'Customize the upload prompt through the <code>tip</code> slot, <code>re-uploadable</code> enable the re upload function, and <code>re-upload-tip</code> customize the left text of the re upload prompt.'
-      },
-      'codeFiles': ['custom-upload-tip.vue']
-    },
    {
      'demoId': 'form-validation',
      'name': { 'zh-CN': '表单校验', 'en-US': 'Form verification' },
@ -272,13 +229,47 @@ export default {
    },
    {
      'demoId': 'image-size',
-      'name': { 'zh-CN': '获取图片的原始尺寸', 'en-US': 'Obtain the original size of the image' },
+      'name': { 'zh-CN': '获取图片原始尺寸', 'en-US': 'Obtain the original size of the image' },
      'desc': {
        'zh-CN': '通过 <code>FileReader.readAsDataURL()</code> 读取文件中的内容，获取图片的原始尺寸。',
        'en-US':
          'Read the content of the file through <code>FileReader. readAsDataURL()</code> to obtain the original size of the image.'
      },
      'codeFiles': ['image-size.vue']
+    },
+    {
+      'demoId': 'custom-trigger',
+      'name': { 'zh-CN': '触发源插槽', 'en-US': 'Trigger source slot' },
+      'desc': {
+        'zh-CN': '通过 <code>trigger</code> 插槽自定义文件选择触发源的内容，有触发文件选项框弹出的功能。',
+        'en-US':
+          'Select the content of the trigger source through the <code>trigger</code> slot customization file, and there is a function to pop up the trigger file option box.'
+      },
+      'codeFiles': ['custom-trigger.vue']
+    },
+    {
+      'demoId': 'custom-upload-tip',
+      'name': { 'zh-CN': '定义上传提示', 'en-US': 'Customized Upload Prompt' },
+      'desc': {
+        'zh-CN':
+          '通过 <code>tip</code> 插槽自定义上传提示， <code>re-uploadable</code> 启用重新上传功能， <code>re-upload-tip</code> 自定义重新上传提示的左侧文字。',
+        'en-US':
+          'Customize the upload prompt through the <code>tip</code> slot, <code>re-uploadable</code> enable the re upload function, and <code>re-upload-tip</code> customize the left text of the re upload prompt.'
+      },
+      'codeFiles': ['custom-upload-tip.vue']
+    },
+    {
+      'demoId': 'upload-events',
+      'name': { 'zh-CN': '事件', 'en-US': 'Event' },
+      'desc': {
+        'zh-CN': `<div class="tip custom-block"><code>preview</code> 监听文件点击事件；<br/> <code>remove</code> 监听文件移除事件；<br/> <code>error</code> 监听文件上传失败事件；<br/>
+          <code>exceed</code> 监听文件超出个数限制事件；<br/> <code>progress</code> 监听文件上传过程事件；<br/> <code>change</code> 监听文件改变事件（文件改变涵盖文件添加、上传成功和上传失败）；<br/>
+          <code>success</code> 监听文件上传成功事件；<br/> <code>hash-progress</code> 监听文件上传生成hash值事件。</div>`,
+        'en-US': `<div class="tip custom-block"><code>preview</code> Listen for file click events; <br /> <code>remove</code> Listen for file removal events; <br /> <code>error</code> Listen for file upload failure events;<br />
+        <code>exceeded</code> Listen for events where the number of files exceeds the limit; <br/> <code>progress</code> Listen for file upload process events;<br/> <code>change</code> Listen for file change events (file changes include file addition, successful upload, and failed upload);<br />
+        <code>success</code> Listen for file upload success events;<br/> <code>hash-progress</code> Listen for file upload to generate hash value events.</div>`
+      },
+      'codeFiles': ['upload-events.vue']
    }
  ],
  apis: [
@ -339,11 +330,12 @@ export default {
            'en-US':
              'Hook before uploading a file. The parameter is the file to be uploaded. If false is returned or Promise is returned and rejected, the upload stops'
          },
-          'demoId': 'prevent-upload-file'
+          'demoId': 'before-upload-limit'
        },
        {
          'name': 'data',
-          'type': 'object',
+          'type': 'IData',
+          'typeAnchorName': 'IData',
          'defaultValue': '',
          'desc': {
            'zh-CN': '上传时附带的额外参数，参数自定义',
@ -443,7 +435,7 @@ export default {
          'type': 'boolean',
          'defaultValue': 'false',
          'desc': {
-            'zh-CN': '配置 merge-service 为true 且开启多文件上传走默认服务会将多个上传服务合并为一个服务上传',
+            'zh-CN': '配置 merge-service 为 true 且开启多文件上传走默认服务会将多个上传服务合并为一个服务上传',
            'en-US':
              'If merge-service is set to true and multiple files are uploaded using the default service, multiple upload services are combined into one service'
          },
@ -498,9 +490,9 @@ export default {
          'type': '(count: number) => string',
          'defaultValue': '',
          'desc': {
-            'zh-CN': '自定义重新上传的左侧提示文字，需要与re-uploadable搭配使用【3.12.0版本新增】',
+            'zh-CN': '自定义重新上传的左侧提示文字，需要与 re-uploadable 搭配使用【3.12.0版本新增】',
            'en-US':
-              'Customize the left prompt for re uploading, which needs to be used in conjunction with re uploadable [added in version 3.12.0]'
+              'Customize the left prompt for re uploading, which needs to be used in conjunction with re-uploadable [added in version 3.12.0]'
          },
          'demoId': 'custom-upload-tip'
        },
@ -562,7 +554,7 @@ export default {
          'defaultValue': '',
          'desc': {
            'zh-CN':
-              '文件上传失败时触发的事件； message 为错误信息事件对象，file 为当前上传失败文件信息，fileList为上传成功file数组',
+              '文件上传失败时触发的事件； message 为错误信息事件对象，file 为当前上传失败文件信息，fileList 为上传成功 file 数组',
            'en-US':
              'Event triggered when file upload fails; Message is the error message event object, file is the current upload failure file information, and fileList is the upload success file array'
          },
@ -584,7 +576,7 @@ export default {
          'type': '(percentage: number) => void',
          'defaultValue': '',
          'desc': {
-            'zh-CN': '文件上传生成hash值触发的事件； percentage为生成的进度值',
+            'zh-CN': '文件上传生成 hash 值触发的事件； percentage 为生成的进度值',
            'en-US': 'Event triggered by file upload to generate hash value; percentage is the generated progress value'
          },
          'demoId': 'upload-events'
@ -690,17 +682,11 @@ export default {
  ],
  types: [
    {
-      name: 'IThumbOption',
+      name: 'IData',
      type: 'interface',
      code: `
-interface IThumbOption {
-  width: number // 弹窗宽度，默认270
-  showDownload: boolean // 是否显示下载按钮，默认false
-  showDel: boolean // 是否显示删除按钮，布尔false
-  showTooltip: boolean // 文件名超出隐藏显示时是否启用tip，默认false
-  popperClass: string // 弹窗列表自定义类名
-  downloadFile: (file) => void // 点击下载按钮执行函数
-  icon: string | VueComponent // 列表结果前 icon ，默认为 'icon-attachment'
+interface IData {
+  [propsName?: any]: any // 上传参数可自定义
 }
      `
    },
@ -745,6 +731,21 @@ interface IHeaders {
      code: `
 type IListType = 'text' | 'picture' | 'picture-card' | 'thumb'
      `
+    },
+    {
+      name: 'IThumbOption',
+      type: 'interface',
+      code: `
+interface IThumbOption {
+  width: number // 弹窗宽度，默认270
+  showDownload: boolean // 是否显示下载按钮，默认false
+  showDel: boolean // 是否显示删除按钮，布尔false
+  showTooltip: boolean // 文件名超出隐藏显示时是否启用tip，默认false
+  popperClass: string // 弹窗列表自定义类名
+  downloadFile: (file) => void // 点击下载按钮执行函数
+  icon: string | VueComponent // 列表结果前 icon ，默认为 'icon-attachment'
+}
+      `
    }
  ]
 }
--- a/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
+++ b/examples/sites/demos/pc/app/pop-upload/webdoc/pop-upload.js
@ -14,7 +14,7 @@ export default {
    },
    {
      'demoId': 'custom-request-headers',
-      'name': { 'zh-CN': '请求头部配置', 'en-US': 'Request header configuration' },
+      'name': { 'zh-CN': '定义请求头部', 'en-US': 'Custom request header' },
      'desc': {
        'zh-CN':
          '通过 <code>with-credentials</code> 开启支持发送 cookie 凭证信息，<code>headers</code> 自定义上传请求头信息。',
--- a/packages/vue/src/file-upload/tests/file-upload.test.tsx
+++ b/packages/vue/src/file-upload/tests/file-upload.test.tsx
@ -19,9 +19,8 @@ describe('PC Mode', () => {
        action={action}
        auto-upload={false}
        v-slots={{
-          tip: () => <div class="tiny-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
-        }}
-      ></FileUpload>
+          tip: () => <div class="tiny-upload__tip">只能上传 jpg/png 文件，且不超过500 kb</div>
+        }}></FileUpload>
    ))
    expect(wrapper.find('.tiny-upload__tip').exists()).toBe(true)
  })