在 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> ); }