vue 实现上传图片
使用 <input type="file"> 基础上传
创建文件输入框，监听 change 事件获取文件对象：
<template>
<input type="file" accept="image/*" @change="handleFileUpload" />
</template>
<script>
export default {
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
if (file && file.type.match('image.*')) {
console.log('Selected file:', file);
}
}
}
};
</script>通过 FormData 发送到后端
将文件对象封装到 FormData 中，结合 axios 或其他 HTTP 库上传：
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);
}
}
}图片预览功能
通过 FileReader 实现本地预览：
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
this.previewImageUrl = e.target.result;
};
reader.readAsDataURL(file);
}
}模板中显示预览：
<img v-if="previewImageUrl" :src="previewImageUrl" alt="Preview" style="max-width: 200px;" />使用第三方库（如 vue-dropzone）
安装 vue-dropzone 简化拖拽上传：
npm install vue2-dropzone组件中使用：
<template>
<vue-dropzone
ref="dropzone"
id="custom-dropzone"
:options="dropzoneOptions"
@vdropzone-success="uploadSuccess"
/>
</template>
<script>
import vue2Dropzone from 'vue2-dropzone';
export default {
components: { vueDropzone: vue2Dropzone },
data() {
return {
dropzoneOptions: {
url: '/api/upload',
acceptedFiles: 'image/*'
}
};
},
methods: {
uploadSuccess(file, response) {
console.log('File uploaded:', response);
}
}
};
</script>限制文件大小和类型
在文件选择时添加校验逻辑：
methods: {
handleFileUpload(event) {
const file = event.target.files[0];
const maxSize = 2 * 1024 * 1024; // 2MB
const validTypes = ['image/jpeg', 'image/png'];
if (!validTypes.includes(file.type)) {
alert('仅支持 JPEG 或 PNG 格式');
return;
}
if (file.size > maxSize) {
alert('文件大小超过 2MB');
return;
}
this.uploadImage(file);
}
}多文件上传支持
通过 multiple 属性和遍历文件列表实现：
<input type="file" multiple @change="handleMultiUpload" />处理多文件：
methods: {
handleMultiUpload(event) {
const files = Array.from(event.target.files);
files.forEach(file => {
if (file.type.match('image.*')) {
this.uploadImage(file);
}
});
}
}
