当前位置：首页 > VUE

vue实现图片上传裁剪

2026-02-25 04:48:08VUE

Vue 实现图片上传裁剪

安装依赖

需要安装 vue-cropperjs 或 cropperjs 库来处理图片裁剪功能。通过 npm 或 yarn 安装：

npm install vue-cropperjs cropperjs

组件引入

在 Vue 组件中引入 vue-cropper 并注册为局部组件：

import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: {
    VueCropper
  }
}

文件上传处理

通过 input 元素实现文件上传，监听 change 事件获取文件对象：

<input type="file" accept="image/*" @change="handleFileUpload">

methods: {
  handleFileUpload(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = (event) => {
      this.imageSrc = event.target.result;
      this.$refs.cropper.replace(event.target.result);
    };
    reader.readAsDataURL(file);
  }
}

图片裁剪配置

初始化 vue-cropper 组件并配置裁剪参数：

<vue-cropper
  ref="cropper"
  :src="imageSrc"
  :aspect-ratio="16/9"
  :view-mode="1"
  :auto-crop-area="0.8"
></vue-cropper>

获取裁剪结果

调用 cropper 实例的 getCroppedCanvas 方法获取裁剪后的图片数据：

methods: {
  cropImage() {
    this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
      const formData = new FormData();
      formData.append('image', blob, 'cropped-image.jpg');
      // 上传 formData 到服务器
    }, 'image/jpeg', 0.9);
  }
}

完整示例代码

<template>
  <div>
    <input type="file" accept="image/*" @change="handleFileUpload">
    <vue-cropper
      ref="cropper"
      :src="imageSrc"
      :aspect-ratio="16/9"
    ></vue-cropper>
    <button @click="cropImage">裁剪并上传</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropperjs';
import 'cropperjs/dist/cropper.css';

export default {
  components: { VueCropper },
  data() {
    return {
      imageSrc: ''
    };
  },
  methods: {
    handleFileUpload(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (event) => {
        this.imageSrc = event.target.result;
        this.$refs.cropper.replace(event.target.result);
      };
      reader.readAsDataURL(file);
    },
    cropImage() {
      this.$refs.cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        formData.append('image', blob, 'cropped-image.jpg');
        console.log('裁剪后的图片数据:', formData);
      }, 'image/jpeg');
    }
  }
};
</script>