标签：截图 Vue false elementUI 裁剪 vueCropper file 上传 图片

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('上传图片失败')
                    }
                });
            })
        }

标签：截图,Vue,false,elementUI,裁剪,vueCropper,file,上传,图片
来源： https://www.cnblogs.com/pyx-blog/p/14899506.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。