图片处理怎么搭建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片处理</title>
</head>
<body>
    <input type="file" id="imageUpload">
    <img id="preview" src="#" alt="图片预览" style="display:none;">
    <script>
        document.getElementById('imageUpload').addEventListener('change', function(event) {
            const file = event.target.files[0];
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').src = e.target.result;
                document.getElementById('preview').style.display = 'block';
            };
            reader.readAsDataURL(file);
        });
    </script>
</body>
</html>

const express = require('express');
const sharp = require('sharp');
const app = express();
const port = 3000;

app.post('/upload', async (req, res) => {
    try {
        const imageBuffer = req.file.buffer;
        const processedImage = await sharp(imageBuffer)
            .resize(200, 200)
            .toBuffer();
        res.send(processedImage);
    } catch (error) {
        res.status(500).send('图片处理失败');
    }
});

app.listen(port, () => console.log(`Server running on port ${port}`));