VueJS3+Typescript 如何处理input文件上传v-model不可用问题

1. 响应式数据修正 #

你当前的类型声明存在隐患，初始值为null时强制转为File类型会导致后续调用File相关API时报类型错误，修正为可选类型即可：

data() {
  return {
    file: null as File | null,
  };
},

2. 模板补充（可选） #

如果需要自定义上传按钮触发隐藏的文件选择框，可以补充如下代码：

<button @click="triggerFileSelect">选择文件上传</button>
<input
  type="file"
  name="file"
  accept="image/*" <!-- 按需添加，限制可选择的文件类型 -->
  @change="uploadFile"
  style="display: none; border: none"
/>

3. 核心逻辑实现 #

methods: {
  // 触发隐藏的文件选择框
  triggerFileSelect() {
    document.querySelector<HTMLInputElement>('input[name="file"]')?.click()
  },
  // 文件选择回调
  async uploadFile(e: Event) {
    const inputDom = e.target as HTMLInputElement
    // 未选中文件直接返回
    if (!inputDom.files?.length) {
      this.file = null
      return
    }
    // 存储选中的文件
    this.file = inputDom.files[0]

    // 场景1：本地读取文件内容（如预览图片、读取文本内容）
    // 以下为读取图片生成预览图示例
    // const reader = new FileReader()
    // reader.onload = (loadEvent) => {
    //   // 生成的base64可直接赋值给img的src属性预览
    //   this.previewUrl = loadEvent.target?.result as string
    // }
    // reader.readAsDataURL(this.file)

    // 场景2：上传文件到后端接口
    const formData = new FormData()
    // 第一个参数为后端约定的文件字段名，按需修改
    formData.append('file', this.file)
    // 如需传递额外参数直接append即可
    // formData.append('type', 'avatar')

    try {
      // 以fetch为例，使用axios写法一致，无需手动设置Content-Type
      const uploadRes = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      })
      const result = await uploadRes.json()
      console.log('上传成功', result)
    } catch (err) {
      console.error('上传失败', err)
    }
  }
}

常见注意事项 #

• 发送上传请求时不要手动设置Content-Type: multipart/form-data，浏览器会自动生成带boundary的请求头，手动设置会导致后端无法解析文件
• 如需支持多文件上传，给input添加multiple属性后，处理inputDom.files数组内的所有文件即可
• 如果需要清除已选中的文件实现重复选择相同文件触发change事件，可在每次选择完成后给inputDom.value = ''

内容的提问来源于stack exchange，提问作者Thiago Valente