vue实现添加图片
使用 <input type="file"> 上传图片
在 Vue 中可以通过原生文件输入框实现图片上传，监听 change 事件获取文件对象：
<template>
<input type="file" accept="image/*" @change="handleFileUpload" />
</template>
<script>
export default {
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
if (file) {
console.log('Selected file:', file);
// 可在此处调用上传逻辑
}
}
}
};
</script>预览上传的图片
通过 FileReader 将图片文件转换为 Base64 或 Blob URL，实现本地预览：
<template>
<div>
<input type="file" @change="previewImage" />
<img v-if="imageUrl" :src="imageUrl" alt="Preview" style="max-width: 300px;" />
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: null
};
},
methods: {
previewImage(event) {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
this.imageUrl = e.target.result;
};
reader.readAsDataURL(file);
}
}
}
};
</script>通过 Axios 上传图片到服务器
结合 Axios 将图片文件发送到后端接口，通常需使用 FormData 包装数据：
methods: {
async uploadImage(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('Upload success:', response.data);
} catch (error) {
console.error('Upload failed:', error);
}
}
}使用第三方库（如 Vuetify）
UI 框架如 Vuetify 提供了封装好的图片上传组件，简化交互逻辑：
<template>
<v-file-input
accept="image/*"
label="Upload Image"
@change="handleUpload"
></v-file-input>
</template>图片裁剪与压缩
集成库如 cropperjs 实现前端裁剪，或使用 compressorjs 压缩图片：
import Compressor from 'compressorjs';
methods: {
compressImage(file) {
new Compressor(file, {
quality: 0.6,
success(result) {
console.log('Compressed file:', result);
}
});
}
}注意事项
- 文件类型验证：通过
accept="image/*"限制上传类型，或在后端校验文件头。 - 大小限制：前端可通过
file.size检查，后端也需限制最大尺寸。 - 安全性：避免直接渲染用户上传的原始 URL，防止 XSS 攻击。
