diff --git a/packages/core/useUpload/index.ts b/packages/core/useUpload/index.ts index fb7e1c3..8b82a42 100644 --- a/packages/core/useUpload/index.ts +++ b/packages/core/useUpload/index.ts @@ -10,8 +10,9 @@ import { ref } from 'vue' interface UseUploadOptions { url: string - multiple?: boolean accept?: string + maxSize?: number // default infinity + maxCount?: number // default inifinity } interface UseUploadFile { @@ -72,7 +73,7 @@ const genUploadFile = async (file: File): UseUploadFile => ({ }) export const useUpload = (options: UseUploadOptions): UseUploadReturn => { - const { url, multiple = false, accept = '' } = options + const { url, accept = '', maxSize = Infinity, maxCount = Infinity } = options const acceptList = accept.split(',').map((type) => type.trim()) const files = ref([]) @@ -97,26 +98,31 @@ export const useUpload = (options: UseUploadOptions): UseUploadReturn => { }) } - const append = async (file: File | File[]) => { - if (!multiple && Array.isArray(file)) { - console.warn( - 'if you want upload multiple files, set options multiple is `true`' - ) - } - if (multiple) { - if (!(file as File[]).every(validFileType)) { - throw new Error('Have some File reject') - } - files.value = [ - ...files.value, - ...(await (file as File[]).map(async (f) => genUploadFile(f))), - ] + const append = async (file: File | File[] | FileList) => { + let appendFiles = [] + if (file instanceof FileList) { + appendFiles = Array.from(file) + } else if (Array.isArray(file)) { + appendFiles = file + } else if (file instanceof File) { + appendFiles = [file] } else { - if (!validFileType(file as File)) { - throw new Error('File type reject.') - } - files.value.push(await genUploadFile(file)) + // nothing } + // check max size + if (files.value.length + appendFiles.length >= maxCount) { + throw new Error('Exceed the maximum number of files') + } + if (!(appendFiles as File[]).every(validFileType)) { + throw new Error('Have some File reject') + } + + files.value = [ + ...files.value, + ...(await Promise.all( + (appendFiles as File[]).map(async (f) => genUploadFile(f)) + )), + ] } const remove = (index: number[] | number): UseUploadFile[] => { diff --git a/src/demo/UseUpload.vue b/src/demo/UseUpload.vue index 26329a4..5a33f27 100644 --- a/src/demo/UseUpload.vue +++ b/src/demo/UseUpload.vue @@ -3,10 +3,10 @@ import { watch, ref, h, VNode } from 'vue' import { useUpload } from '@noi/core' const url = 'https://run.mocky.io/v3/da20c84f-fbe5-4510-8f24-80fa61474790' -const { upload, append, files } = useUpload({ url }) +const { upload, append, files } = useUpload({ url, maxSize: 100, maxCount: 3 }) const inputChange = (event) => { - append(event.target.files[0]) + append(event.target.files) } @@ -21,7 +21,7 @@ const inputChange = (event) => {

- +