elementui结合vue-cropper实现裁剪和上传-蒲公英云

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

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

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, '截图框当前坐标')
},

实现效果：

剪裁： watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70 剪裁后：

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

希望大家能避免~~~