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

原创

于 2021-05-14 16:59:46 发布 · 688 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文介绍了如何在Vue.js项目中结合ElementUI库，利用vue-cropper组件实现图片的裁剪和多张上传功能，详细阐述了安装、页面引用及组件的具体使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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="t