vue 2.0 elemnt ui + vue-cropper 实现单图裁剪上传

1.安装

npm install vue-cropper

2.在任意地方创建一个cropper.vue 组件

<div>

</div>

</div>

<el-button type="primary" icon="el-icon-zoom-in" @click="changeScale(1)"></el-button>

<el-button type="primary" icon="el-icon-zoom-out" @click="changeScale(-1)"></el-button>

<el-button type="primary" @click="rotateRight">顺时针旋转</el-button>

<el-button type="primary" @click="rotateLeft">逆时针旋转</el-button>

</div>

<el-button type="primary" :disabled="isDisabled" @click="uploadImg('base64')">上传</el-button>

</div>

</template>

import { VueCropper } from 'vue-cropper';

// console.log(VueCropper);

export default {

data () {

return {

previews: {}, // 预览数据

option: {

img: '', // 裁剪图片的地址 (默认：空)

outputSize: 1, // 裁剪生成图片的质量 (默认:1)

full: false, // 是否输出原图比例的截图选true生成的图片会非常大 (默认:false)

outputType: 'jpg', // 裁剪生成图片的格式 (默认:jpg)

canMove: true, // 上传图片是否可以移动 (默认:true)

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

canMoveBox: true, // 截图框能否拖动 (默认:true)

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

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

autoCropWidth: 500, // 默认生成截图框宽度 (默认:80%)

autoCropHeight: 400, // 默认生成截图框高度 (默认:80%)

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

fixed: false, // 是否开启截图框宽高固定比例 (默认:true)

fixedNumber: [1.5, 1], // 截图框比例 (默认:[1:1])

enlarge: 1

isDisabled: false,

downImg: '#'

};

props: ['imgFile', 'fixedNumber','autoCropWH',],

methods: {

changeScale (num) {

// 图片缩放

num = num || 1;

this.$refs.cropper.changeScale(num);

rotateLeft () {

// 向左旋转

this.$refs.cropper.rotateLeft();

rotateRight () {

// 向右旋转

this.$refs.cropper.rotateRight();

Update () {

this.option.autoCropWidth = this.autoCropWH.w ? this.autoCropWH.w : 500

this.option.autoCropHeight = this.autoCropWH.h ? this.autoCropWH.h : 400

this.option.img = this.imgFile.url;

realTime (data) {

// 实时预览

this.previews = data;

uploadImg (type) {

// 将剪裁好的图片回传给父组件

event.preventDefault();

this.isDisabled = true;

let that = this;

if (type === 'blob') {

this.$refs.cropper.getCropBlob(data => {

that.$emit('upload', data);

});

} else {

this.$refs.cropper.getCropData(data => {

that.$emit('upload', data);

});

}

components: { VueCropper }

};

</script>

<style>

.cropper-content {

display: flex;

display: -webkit-flex;

justify-content: flex-end;

-webkit-justify-content: flex-end;

}

.cropper-content .cropper {

width: 500px;

height: 400px;

}

.cropper-content .show-preview {

flex: 1;

-webkit-flex: 1;

display: flex;

display: -webkit-flex;

justify-content: center;

-webkit-justify-content: center;

overflow: hidden;

border: 1px solid #cccccc;

background: #cccccc;

margin-left: 40px;

}

.preview {

overflow: hidden;

border: 1px solid #cccccc;

background: #cccccc;

}

.footer-btn {

margin-top: 30px;

display: flex;

display: -webkit-flex;

justify-content: flex-end;

-webkit-justify-content: flex-end;

}

.footer-btn .scope-btn {

width: 412px;

display: flex;

display: -webkit-flex;

justify-content: space-between;

-webkit-justify-content: space-between;

}

.footer-btn .upload-btn {

flex: 1;

-webkit-flex: 1;

display: flex;

display: -webkit-flex;

justify-content: center;

-webkit-justify-content: center;

}

.footer-btn .btn {

outline: none;

display: inline-block;

line-height: 1;

white-space: nowrap;

cursor: pointer;

-webkit-appearance: none;

text-align: center;

-webkit-box-sizing: border-box;

box-sizing: border-box;

outline: 0;

margin: 0;

-webkit-transition: 0.1s;

transition: 0.1s;

font-weight: 500;

padding: 8px 15px;

font-size: 12px;

border-radius: 3px;

color: #fff;

background-color: #67c23a;

border-color: #67c23a;

}

</style>

3.结合elemnt ui 使用组件

<div>

<el-upload

:action="uploadUrl()"

accept="image/png,image/jpg,image/jpeg"

list-type="picture-card"

:limit='1'

:auto-upload="false"

:on-preview="handlePictureCardPreview"

:http-request="upload"

:on-change="consoleFL"

:file-list="uploadList"

</el-upload>

<el-dialog :visible.sync="dialogVisible">

</el-dialog>

<el-dialog :visible.sync="cropperModel" width="1100px" :before-close="beforeClose">

</Cropper>

</el-dialog>

</div>

</template>

import Cropper from '../../common/cropper';

import { showLoading, hideLoading,regular,Rodmo} from '../../../utils/loading.js'

export default {

data() {

return {

upfile: '', // 当前被选择的图片文件

autoCropWH:{w:89,h:89},//裁剪的宽高

uploadList:[], //图片显示列表

fixedNumber: [1.5, 1],// 剪裁框比例设置

dialogImageUrl: '',

dialogVisible: false,

cropperModel: false, // 剪裁组件弹窗开关

}

updated () {

if (this.$refs.vueCropper) {

this.$refs.vueCropper.Update();

}

components: { //注册组件

Cropper

methods: {

uploadUrl(){ //上传路径

return '这里写自己的路径'

beforeClose () { //关闭弹窗

this.cropperModel = false;

consoleFL (file, fileList) {// 弹出剪裁框，将当前文件设置为文件

this.cropperModel = true;

this.upfile = file;

async upload (data) { // 自定义upload事件

let fileimg = ''

fileimg = await this.base64ToFile(data,this.upfile.name) //将base64图片转成文件类型

if(fileimg != ''){

let param = new FormData()

let imgurl = window.URL.createObjectURL(fileimg) //拿到截取的图片数据路径

param.append('file',fileimg) //添加FormData对象

this.imgUpload(param,imgurl);

}

handlePictureCardPreview(file) { //点击文件列表中已上传的文件时

this.dialogImageUrl = file.url;

this.dialogVisible = true;

async imgUpload(formData,imgurl) { //自定义图片上传

let url = this.uploadUrl()

this.$axios.post(url,formData,{ headers: { 'Content-Type': 'multipart/form-data' } }).then(res => {

setTimeout(function() {

hideLoading()

}, 200)

if(!res.data.Code) {

let p = {}

p.url = imgurl

this.uploadList = [p] //将截取的图片数据路径赋值给显示数组

this.$refs.vueCropper.isDisabled = false;

this.$message({ message: res.data.Msg, type: 'success' }); //elemnt ui成功提示

} else {

this.$alert(res.data.Msg, '错误提醒', {

confirmButtonText: '确定',

callback: action => {

}

});

}

})

this.cropperModel = false; //关掉弹窗

base64ToFile(urlData, fileName) { //将base64转换为file

let arr = urlData.split(',');

let mime = arr[0].match(/:(.*?);/)[1];

let bytes = atob(arr[1]); // 解码base64

let n = bytes.length

let ia = new Uint8Array(n);

while (n--) {

ia[n] = bytes.charCodeAt(n);

}

return new File([ia], fileName, { type: mime });

}

</script>

<style>

</style>