vue实现上传图片
使用 <input type="file"> 获取文件
在 Vue 中创建一个文件上传输入框，绑定 @change 事件监听文件选择：
<template>
<input type="file" accept="image/*" @change="handleFileUpload" />
</template>accept="image/*" 限制只能选择图片文件。
处理文件选择事件
在 methods 中定义 handleFileUpload 方法，通过 event.target.files 获取文件对象：
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
if (!file) return;
// 验证文件类型和大小
if (!file.type.match('image.*')) {
alert('请上传图片文件');
return;
}
if (file.size > 5 * 1024 * 1024) { // 限制5MB
alert('文件大小超过限制');
return;
}
this.previewImage(file); // 预览图片
this.uploadFile(file); // 上传逻辑
}
}实现图片预览
使用 FileReader 将图片转换为 Base64 并显示预览：
methods: {
previewImage(file) {
const reader = new FileReader();
reader.onload = (e) => {
this.imageUrl = e.target.result; // 绑定到data中的imageUrl
};
reader.readAsDataURL(file);
}
}模板中显示预览：
<img v-if="imageUrl" :src="imageUrl" width="200" />上传到服务器
通过 FormData 构造表单数据，使用 axios 发送请求：
methods: {
async uploadFile(file) {
const formData = new FormData();
formData.append('image', file); // 与后端约定的字段名
try {
const response = await axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
console.log('上传成功', response.data);
} catch (error) {
console.error('上传失败', error);
}
}
}使用第三方库（可选）
如需更复杂功能（拖拽上传、进度条等），可集成以下库：
- vue-upload-component：支持多文件、拖拽上传
npm install vue-upload-component - dropzone：专业的拖拽上传库
后端注意事项
确保后端接口：
- 接收
multipart/form-data格式数据 - 处理文件存储（如本地磁盘或云存储）
- 返回文件访问URL或处理结果
完整示例代码
<template>
<div>
<input type="file" accept="image/*" @change="handleFileUpload" />
<img v-if="imageUrl" :src="imageUrl" width="200" />
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
if (!file) return;
if (!file.type.match('image.*')) {
alert('请上传图片文件');
return;
}
this.previewImage(file);
this.uploadFile(file);
},
previewImage(file) {
const reader = new FileReader();
reader.onload = (e) => {
this.imageUrl = e.target.result;
};
reader.readAsDataURL(file);
},
async uploadFile(file) {
const formData = new FormData();
formData.append('image', file);
try {
await axios.post('/api/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
});
} catch (error) {
console.error('上传失败', error);
}
}
}
};
</script>
