可以通过以下步骤实现:
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*">
<input type="submit" value="上传">
</form>
const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer({ dest: 'uploads/' });
app.post('/upload', upload.single('image'), (req, res) => {
// 处理上传的图片,保存到服务器上的指定位置
const imagePath = req.file.path;
// 返回图片路径给前端
res.send({ imagePath });
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', () => {
const file = fileInput.files[0];
const formData = new FormData();
formData.append('image', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
const imagePath = data.imagePath;
console.log('图片路径:', imagePath);
})
.catch(error => {
console.error('上传失败:', error);
});
});
通过以上步骤,用户可以在前端页面选择HTML格式的图片文件进行上传,后端接收并保存图片文件,并返回图片的路径给前端。前端可以根据返回的图片路径进行进一步的处理,例如显示图片或将路径保存到数据库中。
腾讯云相关产品推荐:
领取专属 10元无门槛券
手把手带您无忧上云