利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件

　　公共组件：

<template>
<div>
<div class="upload-box">
<div class="image-box"
v-if="imageUrl"
:style="{'background-image': 'url('+ imageUrl +')', 'height': imageHeight}"></div>
<div class="upload">
<h6 class="upload-des">支持 jpg、png 格式大小 5M 以内的图片</h6>
<input type="file" @change="getFile" ref="file" id="file">
<label for="file">点击上传</label>
</div>
</div>
<!-- vueCropper 剪裁图片实现-->
<div class="vue-cropper-box" v-if="isShowCropper">
<div class="vue-cropper-content">
<vueCropper ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="option.info"
:canScale="option.canScale"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber">
</vueCropper>
</div>
</div>
<el-button v-if="isShowCropper" type="danger" @click="onCubeImg">确定裁剪图片</el-button>
</div>
</template>
<script>
import VueCropper from "vue-cropper"
export default {
name: 'Avatar',

data () {
return {
//裁剪组件的基础配置option
option: {
img: '', //裁剪图片的地址
info: true, //裁剪框的大小信息
outputSize: 1, // 裁剪生成图片的质量
outputType: 'png', //裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 195, // 默认生成截图框宽度
autoCropHeight: 10, // 默认生成截图框高度
fixed: false, //是否开启截图框宽高固定比例
fixedNumber: [1, 1] //截图框的宽高比例
},
isShowCropper: false //是否显示截图框
}
},

props: {
// 特殊配置
cropperOption: {
type: Object,
default: () => {
return null
}
},
// 默认图片
imageUrl: {
type: String,
default: ''
},
// 图片展示高度
imageHeight: {
type: String,
default: '100px'
}
},

components: {
VueCropper
},

methods: {
getFile (e) {
let _this = this
var files = e.target.files[0]
if (!e || !window.FileReader) return // 看支持不支持FileReader
let reader = new FileReader()
reader.readAsDataURL(files)
reader.onloadend = function () {
_this.isShowCropper = true
_this.option.img = this.result
_this.$refs.file.value = ''
}
},

// 确定裁剪图片
onCubeImg () {
this.$refs.cropper.getCropData((data) => {
this.isShowCropper = false
//console.log("压缩前的图片大小：" + data.length)
let img = new Image(),
_this = this
img.src = data
img.onload = function() {
//let _data = _this.compress(img)
let blob = _this.dataURItoBlob(data)

let formData = new FormData()
formData.append("icon", blob)
//console.log("将blob对象转成formData对象：" + formData.get("icon"))
_this.$emit('cropped', data, formData)
}
})
},

// 压缩图片
compress(img) {
let canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
initSize = img.src.length,
width = img.width,
height = img.height;
canvas.width = width
canvas.height = height
// 铺底色
ctx.fillStyle = "#fff"
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.drawImage(img, 0, 0, width, height)
//进行压缩
let ndata = canvas.toDataURL("image/jpeg", 0.8)
//console.log("压缩后的图片大小：" + ndata.length)
return ndata
},
// base64转成bolb对象
dataURItoBlob(base64Data) {
let byteString
if (base64Data.split(",")[0].indexOf("base64") >= 0)
byteString = atob(base64Data.split(",")[1])
else
byteString = unescape(base64Data.split(",")[1])
let mimeString = base64Data .split(",")[0] .split(":")[1] .split(";")[0];
let ia = new Uint8Array(byteString.length);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], { type: mimeString })
},

// 初始化配置文件
initOptions () {
this.isShowCropper = false
if (this.cropperOption) {
for (let key in this.option) {
this.option[key] = this.cropperOption[key] || this.option[key]
}
}
}
},

created () {
this.initOptions()
}
}
</script>
<style scoped lang="stylus" rel="stylesheet">
.upload-box {
& > div {
display inline-block
vertical-align middle
}
& .upload-des {
margin 0
font-weight 400
color #909399
}
}

.image-box {
width 100px
height 100px
margin-right 20px
background-size 100px auto
background-position left center
background-repeat no-repeat
}

.upload {
& label {
width: 80px;
height: 24px;
font-size: 12px;
line-height: 24px;
display: inline-block;
border-radius: 4px;
text-align: center;
border: 1px solid #ddd;
cursor pointer
}
}

input[type='file'] {
display: none;
}

.vue-cropper-box {
width: 60%;
height: 200px;
margin: 15px 0px;
.vue-cropper-content {
height 200px
}
}
</style>

　　调用

<el-form-item label="头像" prop="icon" :rules="rules.required">
　　<Avatar v-on:cropped="doCrop"
　　:cropperOption="cropperOption"
　　:imageUrl="guestInfo.icon"></Avatar>
</el-form-item>

　　注意下面这个二进制文件接收和上传的问题

resetForm(){
　　this.$nextTick(() => {
　　　　this.$refs.guest.clearValidate()
　　　　this.guestUpInfo = new FormData()
　　})
},

//完成裁剪
doCrop(icon, file){
　　this.guestInfo.icon = icon
　　this.guestUpInfo = file
}

//新增、编辑提交
submitGuest(){
validCallback(this, 'guest', () => {
this.guestUpInfo.append('name',this.guestInfo.name)
this.guestUpInfo.append('position',this.guestInfo.position)
this.guestUpInfo.append('description',this.guestInfo.description)
if(this.guestInfo.seq){
this.guestUpInfo.append('seq',this.guestInfo.seq)
}
if(this.editGuest){
this.guestUpInfo.append('id',this.guestInfo.id)
}

publicSubmitApi('saveSpeaker', this.guestUpInfo, true).then(res => {
if (res.status === 200) {
this.guestShow = false
this.fetchData()
this.$message({
message: this.editGuest ? '编辑成功' : '新增成功',
type: 'success'
})
}
})
})
},