如何使用异步创建文件和缩略图？

<input type="file" id="fileInput" accept="image/*">

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
        const formData = new FormData();
        formData.append('file', file);

        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            console.log('File uploaded successfully:', data);
        })
        .catch(error => {
            console.error('Error uploading file:', error);
        });
    }
});

npm install express multer sharp

const express = require('express');
const multer = require('multer');
const sharp = require('sharp');
const fs = require('fs');
const path = require('path');

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

app.post('/upload', upload.single('file'), async (req, res) => {
    try {
        const { path: tempPath, mimetype } = req.file;
        const targetPath = path.join(__dirname, '/uploads', `${Date.now()}-${req.file.originalname}`);
        const thumbnailPath = path.join(__dirname, '/uploads', `thumbnail-${Date.now()}-${req.file.originalname}`);

        if (mimetype.startsWith('image/')) {
            await sharp(tempPath)
                .resize(200, 200)
                .toFile(thumbnailPath);

            fs.rename(tempPath, targetPath, (err) => {
                if (err) throw err;
            });
        }

        res.json({
            original: targetPath,
            thumbnail: thumbnailPath
        });
    } catch (error) {
        res.status(500).json({ error: error.message });
    }
});

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