Vue实现前端裁剪（elementUI上传+vueCropper实现）

Posted 2021-06-18 pyx204

data中需要定义的变量

            logoUrl: \'\', // 裁剪后的图片
            // 裁剪组件是否展示
            dialogVisible: false,
            // 裁剪组件的基础配置option
            option: {
                img: \'\', // 裁剪图片的地址
                info: true, // 裁剪框的大小信息
                outputSize: 0.8, // 裁剪生成图片的质量
                outputType: \'png\', // 裁剪生成图片的格式
                canScale: false, // 图片是否允许滚轮缩放
                autoCrop: true, // 是否默认生成截图框
                autoCropWidth: 180, // 默认生成截图框宽度
                autoCropHeight: 64, // 默认生成截图框高度
                fixedBox: true, // 固定截图框大小 不允许改变
                fixed: true, // 是否开启截图框宽高固定比例
                fixedNumber: [180, 64], // 截图框的宽高比例
                full: true, // 是否输出原图比例的截图
                canMoveBox: false, // 截图框能否拖动
                original: false, // 上传图片按照原始比例渲染
                centerBox: false, // 截图框是否被限制在图片里面
                infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
            },     

 

 

首先放一个上传图片的图标，用elementUI组件的upload

<el-upload
    class="avatarUploader"
    :auto-upload="false"
    action=""
    :show-file-list="false"
    :on-change=\'changeUpload\'>
    <img v-if="logoUrl" :src="logoUrl" class="avatar">
    <i v-else class="el-icon-plus"></i>
</el-upload>

注意：auto-upload一定要设置成false, logoUrl代表裁剪后展示的图片，本例只可上传一张图片，如需多张自己调整

 

使用npm 安装 VueCropper，并在页面的js部分引入

import Vue from \'vue\'
import VueCropper from \'vue-cropper\'
// 裁剪图片
Vue.use(VueCropper)

html部分

 <!-- vueCropper 剪裁图片实现-->
        <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>
            <div class="cropper-content">
                <div class="cropper" style="text-align:center">
                    <vueCropper
                        ref="cropper"
                        :img="option.img"
                        :outputSize="option.outputSize"
                        :outputType="option.outputType"
                        :info="true"    
                        :full="option.full"
                        :autoCropHeight="option.autoCropHeight"
                        :autoCropWidth="option.autoCropWidth"
                        :canMove="option.canMove"
                        :canMoveBox="option.canMoveBox"
                        :original="option.original"
                        :autoCrop="option.autoCrop"
                        :fixed="option.fixed"
                        :fixedNumber="option.fixedNumber"
                        :centerBox="option.centerBox"
                        :infoTrue="option.infoTrue"
                        :fixedBox="option.fixedBox"
                    ></vueCropper>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <div class="rowJe">
                    <div @click="dialogVisible = false" class="cancelBtn">取 消</div>
                    <div type="primary" @click="finish" :loading="loading" class="ensureBtn">确认</div>
                </div>
                
            </div>
        </el-dialog>

使用el-upload 上传图片后弹出裁剪页面

// 上传按钮   限制图片大小
        changeUpload(file, fileList) {
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isLt2M) {
                alert(\'上传图片不能超过2M\')
                return false
            }
            this.cutImgFile = file.raw
            this.fileinfo = file
            // console.log("file",file,fileList)

            // 上传成功后将图片地址赋值给裁剪框显示图片
            this.$nextTick(() => {
                this.option.img = URL.createObjectURL(file.raw)
                this.dialogVisible = true
                // console.log("图片地址：",this.option.img)
            })
        },

裁剪完成触发的方法

// 点击裁剪，这一步是可以拿到处理后的地址
        finish() {
            this.$refs.cropper.getCropBlob((data) => {
                // data 是裁剪后的文件数据，需转成后端需要的格式请求上传接口
                const file = new window.File([data],this.cutImgFile.name)
                var formData = new FormData();
                formData.append("file", file);
                // uplodeImgInstitution 封装的后端接口，
                uplodeImgInstitution(formData).then((res) => {
                    if (res.resultCode == 200) {
                        console.log("图片上传成功：",res)
                        this.logoUrl = res.data
                        this.dialogVisible = false
                        this.editInfo()
                    } else {
                        alert(\'上传图片失败\')
                    }
                });
            })
        }