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 调整图片尺寸。
• 移动端兼容：测试在移动设备上的触控操作是否正常。

以上方法覆盖了从基础选择到高级裁剪的场景，可根据实际需求选择实现方式。