nuxt.js中使用vue-cropper实现图片裁剪

最近我司一项目，在个人中心页面上需用户上传个性传封面图（类似知乎个人主页上部），用户上传图片大小不一，且封面图大小为1000px*240px;这就需要在用户上传的时候对图片进行合适大小裁剪。

大概思路：
用户上传图片时

1. 判断图片尺寸大小，宽高不能小于1200px240；小于这个尺寸将无法完美裁剪。
2. 将图片转化为base64格式，即时回显图片和不浪费服务器资源。

这两步完成后，将进入到vue-cropper的裁剪操作了，具体操作可见文档，我在下面写了我的配置供参考；
vue-cropper地址： https://github.com/xyxiao001/vue-cropper

裁剪操作结束，点击确认，得到裁剪后返回图片对象为blod类型，但服务器只接收file类型，故需转为file类型给服务器；得到服务器图片路径后，替换掉原本图片路径，完成✅

1. 下载

npm install vue-cropper

2. 配置

我使用的是全局配置，此处只写出全局配置

2.1 在～/plugins文件夹下，新建 cropper.js文件；引入vue-cropper

import vueCropper from 'vue-cropper';
import Vue from 'vue';
Vue.use(vueCropper);

2.2 在～/nuxt.config.js文件中，配置插件

export default{
    plugins: [
        { src: '~/plugins/cropper', ssr: