<div class="uplod-send-btn">
<label for="uploads"><i class="fa fa-cloud-upload icons"> 图片裁切</i></label>
<input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event, 1)" >
</div>
<!-- 图片裁剪弹框 -->
<div class="cropper-layer" v-if="dialogVisible">
<div class="cropper-title">
<h2 class="tit">图片裁剪</h2>
<i class="fa fa-times icon" @click="isShowDialog "></i>
</div>
<div class="cropper">
<div class="cropper-header">
<span class="cropper-sp">旋转:</span>
<button class="cropper-btn" @click="rotateLeft"><i class="fa fa-undo"></i></button>
<button class="cropper-btn" @click="rotateRight"><i class="fa fa-repeat"></i></button>
<span class="cropper-sp">重新裁切:</span>
<button class="cropper-btn" @click="refreshCrop"><i class="fa fa-undo"></i></button>
<span class="cropper-sp">裁切后宽/高:</span>
<button class="cropper-btn" >{{previews.width}}/{{previews.height}}</button>
</div>
<div class="cropper-center">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.outputSize"
:outputType="option.outputType"
:info="true" :full="option.full"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:fixedBox="option.fixedBox"
:original="option.original"
:autoCrop="option.autoCrop"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
:centerBox="option.centerBox"
:high="option.high"
:infoTrue="option.infoTrue"
:enlarge="option.enlarge"
:maxImgSize="option.maxImgSize"
@realTime="realTime"
:canScale="option.canScale">
</vueCropper>
</div>
</div>
<div class="cropper-footer">
<button class="btn-l" @click="isShowDialog">取 消</button>
<button class="btn-r" @click="finish('blob')">裁切并上传</button>
</div>
</div>
<javascript>
import { VueCropper } from 'vue-cropper'
export default {
components: { VueCropper },
data(){
return{
option: {
img: '',
outputSize: 1,
outputType: 'png', // 输出图片格式
full: true, // 是否输出原图比例的截图
canMove: true, // 能否拖动图片
canMoveBox: true, // 能否拖动截图框
fixedBox: false, // 截图框固定大小
original: true, // 上传图片是否显示原始宽高
autoCrop: true, // 是否自动生成截图框
autoCropWidth: 400, // 自动生成截图框宽度
autoCropHeight: 250, // 自动生成截图框高度
centerBox: false, // 截图框是否限制在图片里(只有在自动生成截图框时才能生效)
high: true, // 是否根据dpr生成适合屏幕的高清图片
infoTrue: true, // 截图信息展示是否是真实的输出宽高
cropData: {},
enlarge: 1, // 是否按照截图框比例输出
mode: 'cover', // 图片默认渲染方式
canScale: true, // 是否允许滚轮图片缩放
maxImgSize: 40000 // 最大上传图片尺寸
},
}
}
refreshCrop () {
// clear
this.$refs.cropper.refresh()
},
clearCrop () {
// clear
this.$refs.cropper.clearCrop()
},
changeScale (num) {
num = num || 1
this.$refs.cropper.changeScale(num)
},
rotateLeft () {
this.$refs.cropper.rotateLeft()
},
rotateRight () {
this.$refs.cropper.rotateRight()
},
finish (type) {
// 输出并上传服务器
var that = this
that.dialogVisible = !that.dialogVisible
if (type === 'blob') {
this.$refs.cropper.getCropBlob(data => {
var formData = new FormData()
var img = window.URL.createObjectURL(data)
this.model = true
this.modelSrc = img
var file = new File([data], 'img.png', { type: 'image/png' })
formData.append('img', file)
var axiosInstance = axios.create()
axiosInstance.post('/M/File/PostUploadFile', formData).then((res) => {
var param = {
'fileName': res.data.other.imgName,
'groupId': that.selectGroup, // 图片分组
'filePath': res.data.other.imgUrl,
'fileSpec': res.data.other.imgWidth + 'x' + res.data.other.imgHeight,
'fileSize': res.data.other.imgLength,
'fileType': res.data.other.imgType
}
that.$http.post('/api/BS_FileSourceMaterial/Create', param).then(function (res) {
that.getDataList()
})
})
})
} else {
this.$refs.cropper.getCropData((data) => {
this.model = true
this.modelSrc = data
})
}
},
// 实时尺寸
realTime () {
var previews = this.$refs.cropper.cropInfo
this.previews = {
width: previews.width,
height: previews.height
}
},
uploadImg (e, num) {
// 上传图片
var that = this
var file = e.target.files[0]
if (!/\.(jpg|jpeg|png|bmp|JPG|PNG)$/.test(e.target.value)) {
that.$message.error('亲,上传图片不能为空,并且裁切只支持jpeg,jpg,png,bmp格式哦!')
document.getElementById('uploads').value = null
return false
} else if (file.size / 1024 / 1024 > 1) {
that.$message.error('上传的图片大小不能超过 1MB,请使用批量上传!')
document.getElementById('uploads').value = null
} else {
that.isShowDialog()
var reader = new FileReader()
reader.onload = e => {
var 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
}
reader.readAsArrayBuffer(file)
document.getElementById('uploads').value = null
}
}
},
}
</javascript>
其中你可能会碰到图片上传一次后不能再次上传同一张图片的坑，因为input在上传文件时候比较特殊，所以我们需要处理一下
document.getElementById('uploads').value = null 获取input ,在每次上传结束后把他的值清空，
