ts上传文件

在 TypeScript 中上传文件的操作与 JavaScript 中上传文件的操作类似，不同的是 TypeScript 强类型约束会限制参数类型，需要像以下方式更明确一些：

1. 在 input 元素中添加 onChange 事件处理函数，以处理文件选择框的值变化事件：

   function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
     const selectedFile = event.target.files[0];
     console.log(selectedFile);
   }

2. 将 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>
     );
   }