在 TypeScript 中上传文件的操作与 JavaScript 中上传文件的操作类似，不同的是 TypeScript 强类型约束会限制参数类型，需要像以下方式更明确一些：
- 在 input 元素中添加
onChange事件处理函数，以处理文件选择框的值变化事件：
function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) { const selectedFile = event.target.files[0]; console.log(selectedFile); }
- 将 input 元素的 type 属性设置为
file，同时添加一个accept属性以限制文件类型：
<input type="file" accept=".jpg,.png" onChange={handleFileChange} />
- 其中，
.jpg和.png分别表示允许上传的文件类型。
完整的 TypeScript 代码示例如下：
import React from "react"; function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) { const selectedFile = event.target.files[0]; console.log(selectedFile); } function Upload() { return ( <div> <label htmlFor="upload-photo"> <input id="upload-photo" name="upload-photo" type="file" accept=".jpg,.png" onChange={handleFileChange} /> </label> </div> ); }
