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

旧城等待， 2022-11-24 11:21 405阅读 0赞

功能描述：上传图片支持裁剪图片

1：先安装vue-cropper

> npm install vue-cropper --save

2：在main.js里加入：

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

3：cropper组件

<el-dialog title="图片剪裁" :visible.sync="cropperVisible" width="400px"  >
    	<div class="cropper-content">
    		<div style="width:100%;height:300px">
    			<vue-cropper
    				ref="cropper"
    				:img="option.img"
    				:output-size="option.size"
    				:output-type="option.outputType"
    				:info="true"
    				:full="option.full"
    				:fixed="option.fixed"
    				:fixed-number="option.fixedNumber"
    				:can-move="option.canMove"
    				:can-move-box="option.canMoveBox"
    				:fixed-box="option.fixedBox"
    				:original="option.original"
    				:auto-crop="option.autoCrop"
    				:auto-crop-width="option.autoCropWidth"
    				:auto-crop-height="option.autoCropHeight"
    				:center-box="option.centerBox"
    				@real-time="realTime"
    				:high="option.high"
    				@img-load="imgLoad"
    				mode="cover"
    				:max-img-size="option.max"
    				@crop-moving="cropMoving"
    			></vue-cropper>
    		</div>
    	</div>
    	<div slot="footer" class="dialog-footer">
    		<el-button @click="cropperVisible = false">取 消</el-button>
    		<el-button type="primary" @click="cropperFinish" :loading="loading">确认    
            </el-button>
    	</div>
    </el-dialog>

<el-dialog title="申请售后" 
         :visible.sync="saleAddVisible"
         width="30%"     
         @close="saleAfterDialogClosed">
    		<el-form
    		ref="addsaleAfterFormRef"
    		:model="saleAfterForm"
    		label-width="120px"
    		:rules="saleAfterFormRules">							
    			    <el-form-item label="故障图片 : " prop="img">
    				     <el-upload
    				     class="avatar-uploader"
    				     action
    				     :auto-upload="false"
    				     :show-file-list="false"
    				     :on-change="changeUpload">
    				     <img v-if="saleAfterForm.imageUrl" :src="saleAfterForm.imageUrl" 
                            class="avatar" />
    				     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    				     </el-upload>
    				</el-form-item>							
    		</el-form>
    		<span slot="footer" class="dialog-footer">
    				<el-button @click="saleAddVisible= false">取 消</el-button>
    				<el-button type="primary" @click="addSaleAfterSubm">确认</el-button>
            </span>
    </el-dialog>

//上传图片	
    changeUpload(file, fileList) {
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(file.raw.name)) {
    		alert('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种')
    		return false
    	}
        const isLt5M = file.size / 1024 / 1024 < 5
    	if (!isLt5M) {
    		this.$message.error('上传文件大小不能超过 5MB!')
    		return false
    	}
        //URL.createObjectURL的参数只能是blob或者file类型
        //第一种方法用FileReader，URL.createObjectURL接收blob类型
    	let reader = new FileReader()
    	reader.onload = (e) => {
    		let data
    		if (typeof e.target.result === 'object') {
    			// 把Array Buffer转化为blob 如果是base64不需要
    			data = window.URL.createObjectURL(new Blob([e.target.result]))
    		} else {
    			data = e.target.result
    		}
    		this.option.img = data
    	}
    	// 转化为base64		
    	this.cropperVisible = true
    	reader.readAsArrayBuffer(file.raw)
    
        //第二种方法，URL.createObjectURL接收file类型
    	this.$nextTick(() => {
    		this.option.img = URL.createObjectURL(file.raw)
    		this.cropperVisible = true
    	})
    },
    
    //点击剪裁弹框的确定按钮
    cropperFinish() {
        // 获取截图的base64 数据
    	this.$refs.cropper.getCropBlob((data) => {
            let form = new FormData()       
            let file = this.blobToFile(data, 'filename.jpg')
    	    form.append('img_file', file)
            this.$axios({
    		   method: 'POST',
    		   url: '/api/api_gateway?method=base.bases.base_photo',
    		   data: form
    	    }).then((res) => {})
    	    this.saleAfterForm.imageUrl = data
    	    this.cropperVisible = false
    	})
    },
    
    //转成blob
    blobToFile(Blob, fileName) {  //兼容IE
    			Blob.lastModifiedDate = new Date()
    			Blob.name = fileName
    			return Blob
    },
    imgLoad(msg) {
    	console.log('imgLoad')
    	console.log(msg)
    },
    
    realTime(data) {	
    	console.log(data)
    },
    cropMoving(data) {
    	console.log(99899)
    	console.log(data, '截图框当前坐标')
    },

4. 实现效果：

剪裁 ：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70][]      剪裁后：![20200806100410464.png][]

注意：我在用vue-cropper的时候遇到个坑，就是vue-cropper不能和mock插件一起使用，不然后报错，后来把mock插件从项目中去掉，就不报错了，报错信息为“Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.”

希望大家能避免~~~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200806100355584.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI=,size_16,color_FFFFFF,t_70
[20200806100410464.png]: /images/20221124/9693b81914bd47f4bc227ac5f7941c70.png