js实现网页替换头像的功能

<input type="file" id="avatarUpload" accept="image/*">
<img id="avatarPreview" src="default-avatar.jpg" alt="Avatar Preview">

document.getElementById('avatarUpload').addEventListener('change', function(event) {
    var file = event.target.files[0];
    if (file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('avatarPreview').src = e.target.result;
        };
        reader.readAsDataURL(file);
    }
});

npm install express multer

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

const app = express();
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + path.extname(file.originalname));
    }
});

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

app.post('/upload-avatar', upload.single('avatar'), (req, res) => {
    res.send({ message: 'File uploaded successfully', filename: req.file.filename });
});

app.listen(3000, () => console.log('Server started on port 3000'));