如何在TypeScript中實現(xiàn)文件上傳

在TypeScript中實現(xiàn)文件上傳可以通過以下步驟：

1. 創(chuàng)建一個HTML文件上傳表單：

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file" />
  <input type="submit" value="Upload" />
</form>

2. 創(chuàng)建一個TypeScript文件，處理上傳文件的邏輯：

const fileInput = document.querySelector('input[type="file"]');

if (fileInput) {
  fileInput.addEventListener('change', async (event) => {
    const files = (event.target as HTMLInputElement).files;

    if (files && files.length > 0) {
      const formData = new FormData();
      formData.append('file', files[0]);

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

        if (response.ok) {
          console.log('File uploaded successfully');
        } else {
          console.error('Failed to upload file');
        }
      } catch (error) {
        console.error('An error occurred while uploading file:', error);
      }
    }
  });
}

3. 在后端服務(wù)器上實現(xiàn)文件上傳的邏輯，例如使用Node.js和Express：

import express from 'express';
import multer from 'multer';

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  if (req.file) {
    res.status(200).send('File uploaded successfully');
  } else {
    res.status(400).send('No file uploaded');
  }
});

app.listen(3000, () => {
    console.log('Server is running on http://localhost:3000');
});

以上代碼示例中，我們使用了FormData類來創(chuàng)建一個表單數(shù)據(jù)對象，并將文件添加到其中。然后使用fetch函數(shù)將文件上傳到服務(wù)器的/upload端點。在服務(wù)器端，我們使用multer中間件來處理文件上傳，并根據(jù)上傳結(jié)果發(fā)送相應(yīng)的響應(yīng)。

希望以上步驟能夠幫助您在TypeScript中實現(xiàn)文件上傳功能。