js 图片上传插件并保存

<input type="file" id="imageUpload" accept="image/*">
<button id="uploadButton">上传图片</button>

document.getElementById('uploadButton').addEventListener('click', function() {
    var fileInput = document.getElementById('imageUpload');
    var file = fileInput.files[0];
    if (!file) {
        alert('请选择一张图片');
        return;
    }

    var formData = new FormData();
    formData.append('image', file);

    fetch('/upload', { // 假设服务器端的上传接口是 /upload
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('图片上传成功:', data);
    })
    .catch(error => {
        console.error('图片上传失败:', error);
    });
});

const express = require('express');
const multer = require('multer');
const app = express();

// 设置文件存储
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/') // 图片保存目录
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname) // 以时间戳和原始文件名保存
    }
});

var upload = multer({ storage: storage });

app.post('/upload', upload.single('image'), function (req, res) {
    if (!req.file) {
        return res.status(400).send('没有文件上传');
    }
    res.send({ message: '文件上传成功', filename: req.file.filename });
});

app.listen(3000, function () {
    console.log('服务器启动，监听端口3000');
});