vue中实现图片切割并上传

需求：上传图片时，可以对图片进行切割裁剪，上传切割后的图片

示例：

        切割前：这是一整张图片

         切割后：得到上下两张图片

 注：题主这里只提供切割图的一种方法思路，具体实现请根据业务场景再做更改

        在看到这个需求后，题主试着在网上找过现成的插件，可惜没找到，但是看到了一个canvas可以实现切图，于是利用canvas实现了此功能。

        废话不多说了，开撕！

        首先，<upload>在上传图片时可以拿到file对象，使用file对象转base64去展示图片（这里用这种方法展示图片可以避免一些错误，但不是必须这么做）

getFile(file) {
      const _this = this
      if (window.FileReader) {
        // 创建读取文件的对象
        var fr = new FileReader()
        // 以读取文件字符串的方式读取文件 但是不能直接读取file