vue实现发送图片
使用 Vue 实现发送图片功能
前端实现（Vue 部分）
模板部分
<template>
<div>
<input type="file" accept="image/*" @change="handleImageUpload">
<button @click="uploadImage">发送图片</button>
<img v-if="previewImage" :src="previewImage" alt="预览" style="max-width: 300px;">
</div>
</template>脚本部分
<script>
export default {
data() {
return {
selectedImage: null,
previewImage: null
}
},
methods: {
handleImageUpload(event) {
const file = event.target.files[0]
if (file && file.type.match('image.*')) {
this.selectedImage = file
// 创建预览
const reader = new FileReader()
reader.onload = (e) => {
this.previewImage = e.target.result
}
reader.readAsDataURL(file)
}
},
async uploadImage() {
if (!this.selectedImage) return
const formData = new FormData()
formData.append('image', this.selectedImage)
try {
const response = await fetch('你的上传API地址', {
method: 'POST',
body: formData
})
if (response.ok) {
const result = await response.json()
console.log('上传成功:', result)
// 处理成功后的逻辑
} else {
console.error('上传失败')
}
} catch (error) {
console.error('上传出错:', error)
}
}
}
}
</script>后端处理（Node.js 示例）
Express 服务器端代码
const express = require('express')
const multer = require('multer')
const app = express()
// 配置存储
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, Date.now() + '-' + file.originalname)
}
})
const upload = multer({ storage: storage })
app.post('/upload', upload.single('image'), (req, res) => {
if (!req.file) {
return res.status(400).send('没有上传文件')
}
res.json({
success: true,
imageUrl: `/uploads/${req.file.filename}`
})
})
app.listen(3000, () => console.log('服务器运行在3000端口'))优化建议
前端优化
- 添加图片大小限制
- 显示上传进度
- 支持多图上传
- 添加图片压缩功能
后端优化
- 添加文件类型验证
- 限制文件大小
- 实现CDN上传
- 添加身份验证
安全注意事项
- 始终验证文件类型
- 限制上传文件大小
- 对上传的文件进行病毒扫描
- 不要直接使用用户提供的文件名
- 考虑使用云存储服务处理上传
