React+TypeScript文件上传遭遇TS2322错误求助

先直接说问题根源：你给type="file"的input绑定了value={this.state.file}，但HTML文件输入框的value属性只能接受字符串/数字/字符串数组/undefined，而你的state.file是FileList|null类型，TypeScript严格的类型检查直接抛出了不兼容的错误。而且文件输入框是只读控件，你根本不需要给它绑定value属性。

接下来一步步修复你的代码：

1. 修正State类型定义 #

你在fileChange方法里存的是单个文件（event.target.files[0]），所以state里的file类型应该是File | null，而不是FileList|null：

interface UploadContainerState {
  tcknVkn: number;
  proclamationYear: number;
  file: File | null; // 这里改成File|null
}

2. 移除文件输入框的value绑定 #

直接删掉value={this.state.file}，因为文件输入框无法通过value设置选中的文件，这个绑定完全没必要：

<input 
  type="file" 
  name="file" 
  className="upload-file" 
  onChange={this.fileChange} 
  // 移除value属性
/>

3. 修复uploadFile方法的逻辑错误 #

你之前的代码里试图从event.target.myimage.files[0]获取文件，但你的文件输入框name是file，而且你已经把文件存在state里了，直接用state的file即可。另外，不要手动设置Content-Type: multipart/form-data，FormData会自动生成包含boundary的正确请求头，手动设置会导致后端无法解析表单数据：

uploadFile(event: any) {
  event.preventDefault();
  if (!this.state.file) return; // 先判断文件是否存在，避免报错

  let formData = new FormData();
  formData.append('file', this.state.file); // 直接用state里的文件
  formData.append('tcknVkn', this.state.tcknVkn.toString()); // 转成字符串，因为FormData接受字符串/Blob/File
  formData.append('proclamationYear', this.state.proclamationYear.toString());

  fetch('ProposalData/UploadFile', {
    method: 'POST',
    credentials: 'include',
    headers: {
      'Accept': 'application/json'
      // 移除Content-Type设置
    },
    body: formData
  })
  // 建议加上fetch的错误处理和结果处理
  .then(response => {
    if (!response.ok) throw new Error('上传失败');
    return response.json();
  })
  .then(data => console.log('上传成功:', data))
  .catch(err => console.error('上传错误:', err));
}

4. 可选：优化输入框的类型处理 #

你的tcknVkn和proclamationYear是number类型，但input的value是字符串，直接赋值会导致类型隐式转换，建议在change事件里转成数字：

proclamationYearChange(event: React.ChangeEvent<HTMLInputElement>) {
  this.setState({ proclamationYear: Number(event.target.value) || 0 });
}

tcknVknChange(event: React.ChangeEvent<HTMLInputElement>) {
  this.setState({ tcknVkn: Number(event.target.value) || 0 });
}

fileChange(event: React.ChangeEvent<HTMLInputElement>) {
  this.setState({ file: event.target.files?.[0] || null }); // 使用可选链更安全
}

把这些修改整合后，你的代码就能正常运行，TypeScript的错误也会消失。

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