vue-cropper插件实现图片截取上传组件封装

下面我将详细讲解如何使用vue-cropper插件实现图片截取上传组件封装：

准备工作

首先我们需要安装vue-cropper插件。在Vue项目中运行以下命令即可：

npm install vue-cropper

接下来在需要使用cropper的组件中引入cropper组件：

import VueCropper from 'vue-cropper'
// ...
export default {
  components: {
    VueCropper
  },
  // ...
}

实现图片截取

在组件中添加一个cropper组件，然后通过绑定属性将图片数据传递给cropper组件，实现裁剪功能：

<cropper
  :img="imgData"
  :output-size="{ width: 200, height: 200 }"
  :guides="false"
  :view-mode="1"
  :zoomable="false">
</cropper>

其中，imgData 为图片数据， output-size 指定输出大小， guides 设置线条是否显示， view-mode 设置裁剪框大小和图片对齐方式， zoomable 设置是否能够缩放。

实现上传功能

将裁剪好的图片转成base64编码的字符串，然后根据需要将该字符串上传到服务器即可。

使用axios进行上传

<template>
  <div>
    <cropper :img="imgData"></cropper>
    <button @click="upload">上传</button>
  </div>
</template>

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

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      imgData: ''
    }
  },
  methods: {
    upload() {
      const image = this.$refs.cropper.getCroppedCanvas().toDataURL()
      const data = {
        image: image
      }
      axios.post('/upload', data)
        .then(response => {
          console.log(response.data)
        })
    }
  }
}
</script>

其中，getCroppedCanvas() 方法返回一个html5 canvas元素，我们可以使用 toDataURL() 将其转化成base64编码的字符串。

使用Form表单进行上传

<template>
  <div>
    <form @submit.prevent="upload">
      <cropper :img="imgData"></cropper>
      <button type="submit">上传</button>
    </form>
  </div>
</template>

<script>
import VueCropper from 'vue-cropper'

export default {
  components: {
    VueCropper
  },
  data() {
    return {
      imgData: ''
    }
  },
  methods: {
    upload() {
      const image = this.$refs.cropper.getCroppedCanvas().toDataURL()
      const data = new FormData()
      data.append('image', image)
      fetch('/upload', {
        method: 'POST',
        body: data
      })
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error))
    }
  }
}
</script>

这里使用了FormData对象进行表单提交。

以上就是使用vue-cropper插件实现图片截取上传组件封装的完整攻略，希望对您有所帮助。