vue3+ts上传一个图片的函数写法

以下是一个基于Vue3和Typescript实现的图片上传函数：

import { ref } from 'vue'

type UploadFile = {
  name: string,
  size: number,
  type: string,
  raw: File
}

export default function useImageUploader() {
  const imageUrl = ref<string | null>(null)
  const uploading = ref(false)
  const error = ref<string | null>(null)

  const uploadImage = async (file: UploadFile) => {
    try {
      uploading.value = true
      const formData = new FormData()
      formData.append('image', file.raw)
      const response = await fetch('/api/uploadImage', {
        method: 'POST',
        body: formData
      })
      const data = await response.json()
      if (response.ok) {
        imageUrl.value = data.imageUrl
      } else {
        error.value = data.message
      }
    } catch (err) {
      error.value = err.message
    } finally {
      uploading.value = false
    }
  }

  return {
    imageUrl,
    uploading,
    error,
    uploadImage
  }
}

这个函数返回一个对象，包含了三个ref对象和一个上传图片的函数uploadImage。imageUrl用于保存上传成功后的图片URL，uploading用于表示当前是否正在上传，error用于保存上传失败时的错误信息。uploadImage接收一个UploadFile对象作为参数，其中包含了上传的文件信息，包括文件名、大小、类型以及原始文件对象。函数会向服务器发送一个POST请求，将文件通过FormData对象提交给服务器。如果上传成功，服务器会返回一个包含图片URL的JSON对象，函数将该URL保存到imageUrl对象中。如果上传失败，函数将错误信息保存到error对象中