elementui结合vue-cropper实现裁剪和上传 旧城等待, 2022-11-24 11:21 335阅读 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组件 <!-- vueCropper 剪裁图片实现--> <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
还没有评论,来说两句吧...