feat(useUpload): init

packages/core/index.ts

@@ -4,3 +4,4 @@ export * from './useLoading'
 export * from './useProgress'
 export * from './useCalendar'
 export * from './useCountdown'
+export * from './useUpload'

packages/core/useRolling/index.ts

@@ -0,0 +1,12 @@
+
+interface UseRollingOptions {
+
+}
+
+interface useRollingReturn {
+
+}
+
+export const useRolling = (options: UseRollingOptions): UseRollingOptions => {
+
+}

packages/core/useUpload/index.ts

@@ -0,0 +1,80 @@
+import { ref } from 'vue'
+
+interface UseUploadOptions {
+  url: string
+  multiple?: boolean
+  accept?: string
+}
+
+interface UseUploadReturn {
+  upload: () => void
+  append: (file: File | File[]) => void
+}
+
+interface UploadOptions {
+  url: string
+  headers?: []
+  method?: string
+}
+
+// 文件类型默认是 formData 格式，如果是其他的格式需要根据 ContentType 进行处理
+const uploadFile = (options: UploadOptions, file: File) => {
+  const { url, method = 'POST' } = options
+
+  const formData = new FormData()
+  formData.append('file', file)
+  return fetch(url, {
+    method,
+    body: formData,
+  })
+}
+
+export const useUpload = (options: UseUploadOptions): UseUploadReturn => {
+  const { url, multiple = false, accept = '' } = options
+  const acceptList = accept.split(',').map((type) => type.trim())
+  const files = ref<File[]>([])
+
+  const upload = () => {
+    const result = files.value.map((file) => uploadFile({ url }, file))
+    Promise.all(result).then((res) => {
+      console.log(res)
+    })
+  }
+
+  const validFileType = (file: File) => {
+    if (accept === '') return true
+    return acceptList.some((acceptedType) => {
+      if (acceptedType.startsWith('.')) {
+        return false
+      }
+      if (acceptedType.endsWith('/*')) {
+        return file.type.startsWith(acceptedType.replace('/*', ''))
+      }
+      return file.type === acceptedType
+    })
+  }
+
+  const append = (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, ...(file as File[])]
+    } else {
+      if (!validFileType(file as File)) {
+        throw new Error("File type reject.");
+      }
+      files.value.push(file as File)
+    }
+  }
+
+  return {
+    upload,
+    append,
+  }
+}

src/App.vue

@@ -2,14 +2,16 @@
 // import UseEllipsis from './demo/UseEllipsis.vue'
 // import UseLoading from './demo/UseLoading.vue'
 // import UseProgress from './demo/UseProgress.vue'
-import UseCalendar from './demo/UseCalendar.vue'
-import UseCountdown from './demo/UseCountdown.vue'
+// import UseCalendar from './demo/UseCalendar.vue'
+// import UseCountdown from './demo/UseCountdown.vue'
+import UseUpload from './demo/UseUpload.vue'
 </script>
 
 <template>
   <!-- <UseEllipsis /> -->
   <!-- <UseLoading /> -->
   <!-- <UseProgress /> -->
   <!-- <UseCalendar /> -->
-  <UseCountdown />
+  <!-- <UseCountdown /> -->
+  <UseUpload />
 </template>

src/demo/UseUpload.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { watch, ref, h, VNode } from 'vue'
+import { useUpload } from '@noi/core'
+
+const { upload, append } = useUpload({ url: '#', accept: 'image/*' })
+
+const inputChange = (event) => {
+  append(event.target.files[0])
+}
+</script>
+
+<template>
+  <input accept="" type="file" @change="inputChange" />
+  <br>
+  <button @click="upload">upload</button>
+</template>