基于element-upload的自定义图片裁剪上传

• 核心代码

<el-upload
	list-type="picture-card"
	action=""
	:auto-upload="false"
	:show-file-list="false"
	:on-change="changeUpload"
>
<img v-if="pic.file_url"
	:src="pic.file_url"
	:width="150"
	:height="150"
>
<i v-else class="el-icon-plus avatar-uploader-icon">
</i>
<el-dialog
	title="图片裁剪"
	:visible.sync="dialogVisible"
	append-to-body
>
	<div>
		<div class="cropper">
			<vueCropper
				ref="cropper"
				:img="option.img"
				:output-size="option.size"
				:output-type="option.outputType"
				:info="true"
				:full="option.full"
				:can=move="option.canMove"
				:can-move-box="option.canMoveBox"
				:original="option.original"
				:auto-crop="option.autoCrop"
				:center-box="option.centerBox"
				:info-true="option.infoTrue"
				:fixed-box="option.fixedBox"
				:auto-crop-width="option.autoCropWidth"
				:auto-crop-height="option.autoCropHeight"
				@realTime="realTime"
			/>
		</div>
	</div>	
	<div
		slot="footer"
		class="dialog-footer"
	>
		<el-button @click="dialogVisible=false">
			取消
		</el-button>
		<el-button 
			type="primary"
			:loading="loading"
			@click="finish"
		>
			确认
		</el-button>
	</div>
</el-dialog>

import {fileLimit} from '@u/util/util'
props:{
	fileUrl:{
		type:String,
		default:'',
		require:true
	}
},
data(){
	return{
		dialogVisible:false,
		option:{
			img:'',//裁剪图片地址
			info:true,//裁剪框大小信息
			outputSize:1,//裁剪生成图片质量
			outputType:'jpeg',//裁剪生成图片格式
			canScale:true,//图片是否允许缩放
			autoCrop:true,//是否默认生成截图框
			autoCropWidth:200,//默认生成截图框宽度
			autoCropHeight:200,//默认生成截图框高度
			fixedBox:false,//固定截图框大小
			full:false,//是否输出原图比例截图,
			canMove:true,//截图框是否可移动
			canMoveBox:true,//截图框是否拖动
			original:false,//上传图片按照原始比例渲染
			centerBox:true,//截图框是否被限制在图片里面
			infoTrue:true//true 为展示真实输出图片宽高
		},
		pic:{
			'file_url':this.fileUrl
		},
		loading:false,
		fileInfo:'',
		previews:''
	}
},
watch:{
	fileUrl(newVal){
		if(newVal){
			this.pic.file_url=newVal
		}
	}
},
methods:{
	//限制图片大小
	changeUpload(file,fileList){
		const body = fileLimit(file,['jpg','png','jpeg'])
		if(body.limit){
			this.$message.error(body.error)
			return !body.limit
		}
		this.fileInfo=file
		this.$nextTick(()=>{
			this.option.img=URL.createObjectURL(file.raw)
			this.dialogVisible=true
		})
	},
	realTime(data){
		this.previews=data
	},
	finish(){
		this.$refs.cropper.getCropBlob((data)=>{
			this.loading=true
			const form=new FormData()
			form.append('file',data,this.fileInfo.name)
			this.$http.request({
				url:'/shec/common/upload/',
				method:'post',
				headers:{'Content-Type','multipart/form-data'},
				data:form
			}).then(res=>{
				if(res.data.result){
					this.pic={
						this.pic={
							'file_url':res.data.data.file_url,
							'original_file_name':res.data.data.original_file_name,
							'width':this.previews.w,
							'height':this.previews.h,
							'file_name':res.data.data.file_name,
							'file_size':res.data.data.file_size,
							'file_type':res.data.data.file_type,
							'path':res.data.data.path
						}
						this.$emit('on-success',this.pic)
					}
				}
			})
		}).finally(()=>{
			this.dialogVisible=false
			this.loading=false
		})
	}	
}