vue实现选择图片
使用 <input type="file"> 选择图片
在 Vue 中可以通过原生 HTML 的 <input type="file"> 实现图片选择功能。绑定 @change 事件监听文件选择，并通过 FileReader 读取图片文件。
<template>
<div>
<input type="file" accept="image/*" @change="handleImageUpload" />
<img v-if="imageUrl" :src="imageUrl" alt="Preview" style="max-width: 300px;" />
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: null,
};
},
methods: {
handleImageUpload(event) {
const file = event.target.files[0];
if (file && file.type.match('image.*')) {
const reader = new FileReader();
reader.onload = (e) => {
this.imageUrl = e.target.result;
};
reader.readAsDataURL(file);
}
},
},
};
</script>使用第三方库（如 vue-file-pond）
对于更复杂的文件上传需求（如多图上传、拖拽上传），可以使用第三方库如 vue-file-pond。
安装依赖：
npm install vue-file-pond filepond --save示例代码：
<template>
<div>
<file-pond
name="imageUpload"
accepted-file-types="image/*"
:server="null"
@processfile="handleFileProcess"
/>
<img v-if="imageUrl" :src="imageUrl" alt="Preview" style="max-width: 300px;" />
</div>
</template>
<script>
import vueFilePond from 'vue-file-pond';
import 'filepond/dist/filepond.min.css';
export default {
components: {
FilePond: vueFilePond(),
},
data() {
return {
imageUrl: null,
};
},
methods: {
handleFileProcess(error, file) {
if (!error) {
this.imageUrl = URL.createObjectURL(file.file);
}
},
},
};
</script>图片预览与裁剪
如果需要裁剪图片，可以结合库如 cropperjs。
安装依赖：
npm install cropperjs --save示例代码：
<template>
<div>
<input type="file" accept="image/*" @change="handleImageUpload" />
<div v-if="imageUrl">
<img ref="imageElement" :src="imageUrl" alt="Preview" style="max-width: 300px;" />
</div>
<button v-if="imageUrl" @click="cropImage">裁剪</button>
</div>
</template>
<script>
import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.min.css';
export default {
data() {
return {
imageUrl: null,
cropper: null,
};
},
methods: {
handleImageUpload(event) {
const file = event.target.files[0];
if (file && file.type.match('image.*')) {
const reader = new FileReader();
reader.onload = (e) => {
this.imageUrl = e.target.result;
this.$nextTick(() => {
this.initCropper();
});
};
reader.readAsDataURL(file);
}
},
initCropper() {
if (this.cropper) {
this.cropper.destroy();
}
this.cropper = new Cropper(this.$refs.imageElement, {
aspectRatio: 1,
viewMode: 1,
});
},
cropImage() {
if (this.cropper) {
const croppedCanvas = this.cropper.getCroppedCanvas();
this.imageUrl = croppedCanvas.toDataURL('image/jpeg');
}
},
},
};
</script>注意事项
- 文件类型限制：通过
accept="image/*"限制用户只能选择图片文件。 - 性能优化：大文件需压缩后再上传，可通过
canvas调整图片尺寸。 - 移动端兼容：测试在移动设备上的触控操作是否正常。
以上方法覆盖了从基础选择到高级裁剪的场景，可根据实际需求选择实现方式。
