typescript 文件上传

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

import React, { useState } from 'react';

function FileUpload() {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    setSelectedFile(file || null);
  }

  async function handleUpload() {
    if (!selectedFile) {
      return;
    }

    const formData = new FormData();
    formData.append('file', selectedFile);

    try {
      const response = await fetch('/upload', {
        method: 'POST',
        body: formData,
      });

      if (response.ok) {
        console.log('Upload successful!');
      } else {
        console.error('Upload failed.');
      }
    } catch (error) {
      console.error('Upload failed:', error);
    }
  }

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
      <button onClick={handleUpload}>Upload</button>
    </div>
  );
}

在上面的示例中，我们使用了React Hooks来管理组件状态。`useState`钩子用于跟踪用户选择的文件，`handleFileChange`函数用于处理文件选择框的值变化事件。当用户选择文件时，我们将其存储在状态中。`handleUpload`函数用于将文件上传到服务器。我们使用`FormData`对象来构建表单数据，并使用`fetch`函数将其发送到服务器。