elementui结合vue-cropper实现裁剪和上传 多张图

1.先安装vue-cropper

npm install vue-cropper --save

2.页面引用

import { VueCropper } from 'vue-cropper'
components: {
    VueCropper // 图片裁剪组件
  },

3.组件的使用

</template>
<el-upload action="#" 
	multiple 
	:limit="3"
	list-type="picture-card" 
	:auto-upload="false"
	:on-exceed="handleExceed"
	:file-list="titleFileList"
	:on-change='getUploadFile'
	:on-preview="handleFileUploadPreview"
	:on-remove="handleRemove">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogEnlargeVisible" append-to-body style="height: 750px;">
    <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<div slot="tip" class="el-upload__tip">只能上传 .jpg/.png/.gif 格式的文件,最多只能上传3张图片</div>

<el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body @close="closeDialog">
	<div class="cropper-content">
		<div class="cropper" style="text-align:center">
			<vueCropper ref="cropper"
			:img="option.img" 
		    :outputSize="o