# Upload 文件上傳組件 ## Usage ```vue <template> <BasicUpload :maxSize="20" :maxNumber="10" @change="handleChange" :api="uploadApi" /> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { BasicUpload } from '/@/components/Upload'; import { uploadApi } from '/@/api/sys/upload'; export default defineComponent({ components: { BasicUpload }, setup() { return { uploadApi, handleChange: (list: string[]) => { createMessage.info(`已上傳文件${JSON.stringify(list)}`); }, }; }, }); </script> ``` ## Config `.env.development` 和 `.env.production` 配置開發和生產的文件上傳地址 ```bash # .env.development VITE_PROXY=[["/upload","http://localhost:3001/upload"]] # 如果沒有跨域問題，則直接使用真實上傳地址 VITE_GLOB_UPLOAD_URL=/upload # .env.production VITE_GLOB_UPLOAD_URL=/upload ``` ## Props | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | ----------------- | ---------- | -------- | ------ | ---------------------------------------- | | value | `string[]` | - | - | 已上傳的文件列表，支持v-model | | showPreviewNumber | `boolean` | true | - | 是否顯示預覽數量 | | emptyHidePreview | `boolean` | false | - | 沒有上傳文件時是否隱藏預覽 | | helpText | `string` | - | - | 幫助文本 | | maxSize | `number` | 2 | - | 單個文件最大體積，單位 M | | maxNumber | `number` | Infinity | - | 最大上傳數量，Infinity 則不限制 | | accept | `string[]` | - | - | 限制上傳格式，可使用文件后綴名(點號可選)或MIME字符串。例如 `['.doc,','docx','application/msword','image/*']` | | multiple | `boolean` | - | - | 開啟多文件上傳 | | uploadParams | `any` | - | - | 上傳攜帶的參數 | | api | `Fn` | - | - | 上傳接口，為上面配置的接口 | ## Events | 事件 | 回調參數 | 返回值 | 說明 | 版本 | | ------ | ------------------ | ------ | ------------------------ | - | | change | `(fileList)=>void` | | 文件列表內容改變觸發事件 | | | delete | `(record)=>void` | | 在上傳列表中刪除文件的事件 | | | preview-delete | `(url:string)=>void` | | 在預覽列表中刪除文件的事件 | 2.5.3 |