vue + element + vue-cropper 实现图片裁剪上传

关于HTML部分的代码

上传组件不能自动上传，并且要设置一个 on-change 方法。

:auto-upload=“false” :on-change=“changeUpload”

<el-upload ref=“pic” list-type=“picture-card” action=“” :auto-upload=“false” :on-change=“changeUpload”

:on-success=“handleAvatarSuccess” :show-file-list=“false”>

请上传长宽为1270*622尺寸并且格式为.jpg或.png的图片文件

<vueCropper ref=“cropper” :img=“option.img” :outputSize=“option.size” :outputType=“option.outputType”

:info=“true” :full=“option.full” :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”>

<el-button @click=“dialogVisible = false”>取 消

<el-button type=“primary” @click=“finish” :loading=“loading”>确认

关于js代码

data() {

return {

dialogVisible: false,

option: {

img: ‘’, // 裁剪图片的地址

info: true, // 裁剪框的大小信息

outputSize: 1, // 裁剪生成图片的质量

outputType: ‘jpeg’, // 裁剪生成图片的格式

canScale: false, // 图片是否允许滚轮缩放

autoCrop: true, // 是否默认生成截图框

// autoCropWidth: 300, // 默认生成截图框宽度

// autoCropHeight: 200, // 默认生成截图框高度

fixedBox: false, // 固定截图框大小 不允许改变

fixed: true, // 是否开启截图框宽高固定比例

fixedNumber: [1270, 622], // 截图框的宽高比例

full: true, // 是否输出原图比例的截图

canMoveBox: true, // 截图框能否拖动

original: false, // 上传图片按照原始比例渲染

centerBox: false, // 截图框是否被限制在图片里面

infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高

},

}

},

// 上传按钮 限制图片大小

changeUpload(file, fileList) {

let testmsg = file.name.substring(file.name.lastIndexOf(‘.’) + 1)

const isJPG = testmsg === ‘jpg’

const isPNG = testmsg === ‘png’

const isLt2M = file.size / 1024 / 1024 < 2;

if (!isJPG && !isPNG) {

this.$message.error(‘上传头像图片只能是 JPG 或 PNG 格式!’);

return

}

var reader = new FileReader();

let data

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.$nextTick(() => {

this.option.img = file.url

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

w Blob([e.target.result]))

}

else {

data = e.target.result

}

}

this.$nextTick(() => {

this.option.img = file.url

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！