文件上传组件 #

function onGetFile(e: Event) {
  // 获取文件上传按钮的dom实例
  const inputDom = e.target as HTMLInputElement
  if (!inputDom) return

  // 获取用户选择的所有文件
  const files = inputDom.files
  if (!files) return

  // 如果未指定 multiple 属性，则一次只能选择一个文件，使用 files[0] 即可获取到，如果指定了 multiple 属性，则需要循环 files 数组
  const imageFile = files[0]
  // 这里可以进行真正的文件类型判断
  console.log(imageFile)
  // 因为 accept 并不能真正意义上的禁止用户选择某类文件，这里获取到的文件类型，也不能完全保证正确，因此前端就做到 accept 控制下即可，严格的文件类型校验，还是留给后端吧
  console.log(imageFile.type)
  // size属性能够获取到文件大小
  console.log(imageFile.size)
  const picInfo: PicInfo = {
    _id: `${new Date().getTime()}-${++seed}`,
    // 这里能够获取到文件名
    name: imageFile.name,
  }
  // 每次change事件最后都要将文件上传按钮的value值设置为空字符，不然，下次再选择同一个文件，将无法再触发change事件
  inputDom.value = ''
  convertImgToBase64(imageFile, (base64: string) => {
    picInfo.url = base64
    picInfo.id = picInfo._id
    val.value = picInfo
    emitTrigger()
  })
}

/**
 * 将图片转成base64格式
 *
 * @param imageFile 图片文件
 * @param callback 转成成功函数回调（这里是接收转换成功结果的函数）
 * @param errorCallback 转成失败函数回调（这里是接收转换失败结果的函数）
 */
function convertImgToBase64(imageFile: File, callback: (base64: string) => void, errorCallback?: (error: any) => void) {
  try {
    let reader = new FileReader()
    reader.onload = function (ev: ProgressEvent<FileReader>) {
      if (callback) {
        const fileReader = ev.target
        if (!fileReader) {
          errorCallback && errorCallback('图片转base64失败')
          return
        }
        let base64Str = fileReader.result as string
        callback(base64Str)
      }
    }
    reader.readAsDataURL(imageFile)
  } catch (error) {
    console.error(error)
    if (errorCallback) {
      errorCallback(error)
    }
  }
}