vue实现上传图片
使用 <input type="file"> 实现基础上传
通过 HTML 原生文件输入控件获取图片文件，结合 Vue 处理文件选择事件：
<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>图片预览功能
利用 URL.createObjectURL 生成临时链接实现前端预览：
<template>
<div>
<input type="file" @change="previewImage" accept="image/*" />
<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) {
this.imageUrl = URL.createObjectURL(file);
}
}
},
beforeUnmount() {
if (this.imageUrl) URL.revokeObjectURL(this.imageUrl); // 释放内存
}
};
</script>通过 FormData 上传到服务器
将文件通过 AJAX 或 Axios 发送到后端接口：
<template>
<input type="file" @change="uploadImage" />
</template>
<script>
import axios from 'axios';
export default {
methods: {
async uploadImage(event) {
const file = event.target.files[0];
if (!file) return;
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);
}
}
}
};
</script>使用第三方库（如 vue-dropzone）
对于复杂需求（拖拽上传、多文件等），可集成专用库：
-
安装依赖：
npm install vue2-dropzone -
组件示例：
<template> <vue-dropzone ref="myDropzone" id="dropzone" :options="dropzoneOptions" @vdropzone-success="uploadSuccess" ></vue-dropzone> </template>
export default { components: { vueDropzone: vue2Dropzone }, data() { return { dropzoneOptions: { url: '/api/upload', acceptedFiles: 'image/*', maxFilesize: 2 // MB } }; }, methods: { uploadSuccess(file, response) { console.log('File uploaded:', response); } } };
```图片压缩与处理
使用 compressorjs 在客户端压缩图片：
-
安装库：
npm install compressorjs -
实现代码：
import Compressor from 'compressorjs';
methods: { compressImage(file) { new Compressor(file, { quality: 0.6, success(result) { const compressedFile = new File([result], file.name, { type: result.type }); console.log('Compressed file:', compressedFile); }, error(err) { console.error('Compression error:', err); } }); } }
### 注意事项
- 文件类型验证需同时在前端和后端进行，防止恶意上传。
- 大文件上传需考虑分片或进度提示（如 Axios 的 `onUploadProgress`）。
- 移动端部分设备可能需要额外处理相机参数（如 `capture="camera"` 属性）。
