使用ant-design-vue和vue-cropper实现裁剪图片并上传到服务器

最新推荐文章于 2024-09-26 17:19:38 发布

起个名都费劲

最新推荐文章于 2024-09-26 17:19:38 发布

阅读量2.8k

点赞数

分类专栏： vue-cropper

本文链接：https://blog.csdn.net/qq_36366758/article/details/104295567

版权

本文介绍了如何结合ant-design-vue和vue-cropper实现用户上传图片后进行裁剪，并将裁剪后的图片上传到服务器的功能。详细步骤包括在main.js中引入vue-cropper，创建图片上传组件，以及实现模态框裁剪功能。

摘要由CSDN通过智能技术生成

安装vue-cropper

npm install vue-cropper

在main.js里面使用

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

需求：

用户上传图片后，需要裁剪，并保留，上传到服务器

思路：

点击上传，从本地选择图片文件
选择文件后弹出模态框（将选择的图片传递过去）模态框作为裁剪图片的容器
进行裁剪
获取裁剪后的结果并将裁剪后的图片上传到服务器，返回图片地址给父组件
父组件获取到裁剪后的图片地址后将图片回显

图片上传框组件

<template>
	<div class="ant-upload-preview">
		<div style="width: 100%">
			<a-upload
			name="avatar"
			:showUploadList="false"
			:beforeUpload="beforeUpload"
			:customRequest="function(){}"
			@change="handleChange"
			>
				<a-icon type="cloud-upload-o" class="upload-icon"/>
				<div class="mask">
				<a-icon type="plus"/>
				</div>
				<img :src="imageUrl" width="180px" height="180px"/>
			</a-upload>
		</div>
	</div>
	<!-- modal -->
    <cropper-modal ref="CropperModal" @ok="handleCropperSuccess"></cropper-modal>
</template>
<script>
  import CropperModal from './CropperModal'
export default {
   
    components: {
   
      CropperModal
    },
    props: {
   
      //图片格式
      imgFormat: {
   
        type: Array,
        default: function() {
   
          return ['image/jpeg']
        }
      },
      //图片大小
      imgSize: {
   
        type: Number,
        default: 2
      },
      //图片裁切配置
      options: {
   
        type: Object,
        default: function() {
   
          return {
   
            autoCropWidth: 180,
            autoCropHeight: 180
          }
        }
      },
      //回显图片路径
      value: {
   
        type: String,
        default: ''
      }
    },
    data() {
   
      return

最低0.47元/天解锁文章