存个图片

110 阅读1分钟

const express = require('express'); const multer = require('multer'); const path = require('path'); const fs = require('fs'); const cors = require('cors'); // 引入cors中间件

const app = express();

/* 存图小工具 npm install express multer cors */ app.use(cors());

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

app.post('/save', upload.single('image'), (req, res) => { const { name } = req.body; const filePath = req.file.path; const newFilePath = path.join('uploads', ${name}.png);

fs.rename(filePath, newFilePath, (err) => {
    if (err) {
        console.error('文件保存失败:', err);
        return res.status(500).send('保存失败');
    }
    res.send('保存成功');
});

});

app.listen(5555, () => { console.log('服务器运行在 http://localhost:5555'); });

Image Upload #imageDiv { border: 2px dashed #ccc; padding: 20px; text-align: center; margin-top: 20px; }

粘贴图片并保存

将图片粘贴到这里
<script>
    document.getElementById('imageDiv').addEventListener('paste', async function(event) {
        const items = event.clipboardData.items;
        let blob = null;

        for (let i = 0; i < items.length; i++) {
            if (items[i].type.includes('image')) {
                blob = items[i].getAsFile();
                break;
            }
        }

        if (blob) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.maxWidth = '100%';
                img.style.height = 'auto';
                document.getElementById('imageDiv').innerHTML = '';
                document.getElementById('imageDiv').appendChild(img);
            };
            reader.readAsDataURL(blob); 
            const name = prompt('请输入图片名称:');
            if (name) {
                const formData = new FormData();
                formData.append('image', blob);
                formData.append('name', name); 
                try {
                    await fetch('http://localhost:5555/save', {
                        method: 'POST',
                        body: formData
                    }); 
                } catch (error) {
                    console.error('保存失败:', error);
                    alert('保存失败,请检查网络!');
                }
            }
        }
    });
</script>