vue实现图片预览功能

使用原生HTML5实现图片预览

通过<input type="file">结合FileReaderAPI实现本地图片预览。在Vue的methods中定义处理函数，读取用户选择的文件并转换为Base64或对象URL。

<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: ''
    }
  },
  methods: {
    previewImage(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>

使用第三方组件库实现

Element UI的el-upload组件内置预览功能，通过设置list-type为picture-card或picture即可启用。

<template>
  <el-upload
    action="#"
    list-type="picture-card"
    :auto-upload="false"
    :on-change="handleChange">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handleChange(file, fileList) {
      // 自动显示预览
    }
  }
}
</script>

实现多图预览与画廊效果

使用vue-photo-preview插件可实现画廊式预览效果。需要先安装插件：

npm install vue-photo-preview

配置使用：

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

模板中使用方式：

<template>
  <div class="image-list">
    <img 
      v-for="(item, index) in images" 
      :key="index" 
      :src="item" 
      preview="1" 
      preview-text="描述文字">
  </div>
</template>

实现图片缩放与旋转功能

结合cropperjs库实现高级图片操作功能。安装依赖后创建图片编辑器组件：

npm install cropperjs

组件实现示例：

<template>
  <div>
    <input type="file" @change="initCropper">
    <div class="img-container">
      <img ref="image" src="">
    </div>
    <button @click="rotate(90)">旋转90°</button>
    <button @click="getCroppedImage">确认</button>
  </div>
</template>

<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.css'

export default {
  methods: {
    initCropper(e) {
      const file = e.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (event) => {
        this.$refs.image.src = event.target.result
        this.cropper = new Cropper(this.$refs.image, {
          aspectRatio: 1
        })
      }
      reader.readAsDataURL(file)
    },
    rotate(degree) {
      this.cropper.rotate(degree)
    },
    getCroppedImage() {
      this.cropper.getCroppedCanvas().toBlob((blob) => {
        // 处理裁剪后的图片
      })
    }
  }
}
</script>

移动端手势操作支持

对于移动端项目，建议使用hammer.js添加手势支持，实现双指缩放和滑动操作：

import Hammer from 'hammerjs'

mounted() {
  const imageElement = this.$refs.previewImage
  const hammer = new Hammer(imageElement)

  hammer.get('pinch').set({ enable: true })
  hammer.on('pinch', (e) => {
    // 实现缩放逻辑
  })
}

性能优化建议

对于大量图片预览场景，采用懒加载技术。使用v-lazy-image插件：

npm install v-lazy-image

注册插件后：

<template>
  <v-lazy-image 
    :src="imageUrl" 
    :src-placeholder="placeholder" 
    @load="onImageLoad"/>
</template>

图片加载状态可通过CSS添加过渡效果：

.v-lazy-image {
  opacity: 0;
  transition: opacity 0.3s;
}
.v-lazy-image-loaded {
  opacity: 1;
}