Vue中如何进行图片裁剪与上传？

在Web开发中，经常需要使用图片，有时候需要对图片进行裁剪和上传，Vue作为一种流行的前端框架，提供了很多方便的工具和插件来帮助开发者实现这些功能。

在这里插入图片描述

图片裁剪

Vue中提供了很多图片裁剪的插件，本文介绍一种常用的插件vue-cropper，它是一个基于Vue的图片裁剪组件，可以快速实现图片的裁剪功能。

安装vue-cropper

安装vue-cropper非常简单，只需要使用npm或yarn安装即可。

npm install vue-cropper --save

使用vue-cropper

安装完成后，在需要使用的组件中引入vue-cropper，并在template中使用。

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imageSrc"
      :auto-crop="true"
      :output-type="'jpeg'"
      :output-quality="0.8"
      :fixed-box="true"
      :fixed-number="[1, 1]"
      :drag-mode="cropDragMode"
      :view-mode="1"
      :guides="true"
      :center="true"
      :zoomable="false"
      :rotatable="true"
      :scalable="false"
      :crop-box-movable="false"
      :crop-box-resizable="false"
      @crop-success="cropSuccess"
    ></vue-cropper>
    <button @click="crop">裁剪图片</button>
  </div>
</template>

在script中，引入vue-cropper，并在data中定义需要的变量和方法。

import VueCropper from 'vue-cropper'

export default {
  components: { VueCropper },
  data () {
    return {
      imageSrc: '', // 图片地址
      cropDragMode: 'crop', // 裁剪模式
    }
  },
  methods: {
    crop () {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        // 将裁剪后的图片上传到服务器
        this.upload(blob)
      })
    },
    cropSuccess (croppedCanvas, blob) {
      // 裁剪成功后的回调函数
      console.log('裁剪成功')
    },
    upload (blob) {
      // 将图片上传到服务器
    },
  },
}

在上面的代码中，我们使用了vue-cropper的很多属性和方法，比如imageSrc表示图片的地址，cropDragMode表示裁剪模式，crop表示开始裁剪图片，cropSuccess表示裁剪成功的回调函数，upload表示将裁剪后的图片上传到服务器。

vue-cropper的属性和方法

vue-cropper提供了很多属性和方法，下面是一些常用的属性和方法。

属性

src：图片地址，必填。
auto-crop：是否自动裁剪，默认为false。
output-type：输出类型，默认为png。
output-quality：输出质量，默认为0.92。
fixed-box：是否固定裁剪框，默认为false。
fixed-number：裁剪框的宽高比例，默认为[1, 1]。
drag-mode：裁剪模式，默认为crop。
view-mode：预览模式，默认为0。
guides：是否显示裁剪框的辅助线，默认为true。
center：是否显示裁剪框的中心点，默认为true。
zoomable：是否可以缩放图片，默认为false。
rotatable：是否可以旋转图片，默认为true。
scalable：是否可以调整裁剪框大小，默认为false。
crop-box-movable：是否可以移动裁剪框，默认为false。
crop-box-resizable：是否可以调整裁剪框大小，默认为false。

方法

getCroppedCanvas()：获取裁剪后的canvas。
getCroppedBase64()：获取裁剪后的base64字符串。
getCroppedBlob()：获取裁剪后的blob对象。

##图片上传

图片裁剪完成后，我们需要将裁剪后的图片上传到服务器，Vue中提供了很多上传图片的插件，比如axios、vue-upload-component等，本文介绍一种常用的插件vue-axios。

安装vue-axios

安装vue-axios也非常简单，只需要使用npm或yarn安装即可。

npm install vue-axios --save

使用vue-axios

安装完成后，在需要使用的组件中引入vue-axios，并在script中定义需要的变量和方法。

import VueAxios from 'vue-axios'
import axios from 'axios'

export default {
  components: { VueAxios },
  data () {
    return {
      imageSrc: '', // 图片地址
      cropDragMode: 'crop', // 裁剪模式
    }
  },
  methods: {
    crop () {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        // 将裁剪后的图片上传到服务器
        this.upload(blob)
      })
    },
    cropSuccess (croppedCanvas, blob) {
      // 裁剪成功后的回调函数
      console.log('裁剪成功')
    },
    upload (blob) {
      let formData = new FormData()
      formData.append('file', blob, 'avatar.jpg')
      axios.post('/upload', formData).then(response => {
        console.log('上传成功')
      }).catch(error => {
        console.log('上传失败')
      })
    },
  },
}

在上面的代码中，我们使用了axios的post方法将裁剪后的图片上传到服务器，并在then和catch中处理上传成功和失败的情况。

vue-axios的属性和方法

vue-axios提供了很多属性和方法，下面是一些常用的属性和方法。

属性

axios：axios实例，必填。

方法

$http.get(url[, config])：发送GET请求。
$http.post(url[, data[, config]])：发送POST请求。
$http.put(url[, data[, config]])：发送PUT请求。
$http.patch(url[, data[, config]])：发送PATCH请求。
$http.delete(url[, config])：发送DELETE请求。

完整代码

下面是完整的Vue组件代码，包括图片裁剪和上传。

<template>
  <div>
    <vue-cropper
      ref="cropper"
      :src="imageSrc"
      :auto-crop="true"
      :output-type="'jpeg'"
      :output-quality="0.8"
      :fixed-box="true"
      :fixed-number="[1, 1]"
      :drag-mode="cropDragMode"
      :view-mode="1"
      :guides="true"
      :center="true"
      :zoomable="false"
      :rotatable="true"
      :scalable="false"
      :crop-box-movable="false"
      :crop-box-resizable="false"
      @crop-success="cropSuccess"
    ></vue-cropper>
    <button @click="crop">裁剪图片</button>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'
import VueAxios from 'vue-axios'
import axios from 'axios'

export default {
  components: { VueCropper, VueAxios },
  data () {
    return {
      imageSrc: '', // 图片地址
      cropDragMode: 'crop', // 裁剪模式
    }
  },
  methods: {
    crop () {
      this.$refs.cropper.getCroppedCanvas().toBlob(blob => {
        // 将裁剪后的图片上传到服务器
        this.upload(blob)
      })
    },
    cropSuccess (croppedCanvas, blob) {
      // 裁剪成功后的回调函数
      console.log('裁剪成功')
    },
    upload (blob) {
      let formData = new FormData()
      formData.append('file', blob, 'avatar.jpg')
      axios.post('/upload', formData).then(response => {
        console.log('上传成功')
      }).catch(error => {
        console.log('上传失败')
      })
    },
  },
}
</script>