vue图片实现功能
图片上传功能实现
使用 <input type="file"> 结合 Vue 的 v-on:change 事件监听文件选择
<template>
<input type="file" @change="handleFileUpload" accept="image/*">
</template>
<script>
export default {
methods: {
handleFileUpload(event) {
const file = event.target.files[0]
if (file) {
// 处理文件逻辑
}
}
}
}
</script>图片预览功能
通过 URL.createObjectURL() 创建临时 URL 实现本地预览
<template>
<div>
<input type="file" @change="previewImage">
<img v-if="imageUrl" :src="imageUrl" width="200">
</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)
}
}
}
}
</script>图片压缩处理
使用 Canvas API 实现客户端图片压缩
compressImage(file, quality = 0.8) {
return new Promise((resolve) => {
const reader = new FileReader()
reader.onload = (event) => {
const img = new Image()
img.onload = () => {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = img.width
canvas.height = img.height
ctx.drawImage(img, 0, 0)
canvas.toBlob((blob) => {
resolve(blob)
}, 'image/jpeg', quality)
}
img.src = event.target.result
}
reader.readAsDataURL(file)
})
}图片上传至服务器
使用 axios 实现图片上传
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'
}
})
return response.data
} catch (error) {
console.error('上传失败:', error)
}
}图片懒加载
使用 Intersection Observer API 实现懒加载
<template>
<img v-lazy="imageUrl" alt="图片">
</template>
<script>
export default {
directives: {
lazy: {
mounted(el, binding) {
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
el.src = binding.value
observer.unobserve(el)
}
})
})
observer.observe(el)
}
}
}
}
</script>图片裁剪功能
使用第三方库如 cropperjs 实现图片裁剪
<template>
<div>
<input type="file" @change="initCropper">
<img ref="image" src="">
<button @click="cropImage">裁剪</button>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'
export default {
methods: {
initCropper(event) {
const file = event.target.files[0]
if (file) {
const reader = new FileReader()
reader.onload = (e) => {
this.$refs.image.src = e.target.result
this.cropper = new Cropper(this.$refs.image, {
aspectRatio: 1
})
}
reader.readAsDataURL(file)
}
},
cropImage() {
this.cropper.getCroppedCanvas().toBlob((blob) => {
// 处理裁剪后的图片
})
}
}
}
</script>
