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>