富文本框

<!-- <div class="info-item" style="flex:1;">

</div>

</div> -->

<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"

:autoCropWidth="option.autoCropWidth"

:autoCropHeight="option.autoCropHeight"

:fixedBox="option.fixedBox"

@realTime="realTime"

@imgLoad="imgLoad"

></vueCropper>

</div>

</div>

</template>

import { VueCropper } from 'vue-cropper'

import { host } from '../../config';

// import Api from '@/js/api.js' //接口url配置文件

export default {

data(){

return {

headImg:'',

//剪切图片上传

crap: false,

previews: {},

option: {

img: '',

outputSize:1, //剪切后的图片质量（0.1-1）

full: false,//输出原图比例截图 props名full

outputType: 'png',

canMove: true,

original: false,

canMoveBox: true,

autoCrop: true,

autoCropWidth: 102,

autoCropHeight: 39,

fixedBox: false ,

fixedNumber: [1, 1]

fileName:'', //本机文件地址

downImg: '#',

imgFile:'',

uploadImgRelaPath:'', //上传后的图片的地址（不带服务器域名）

}

components: {

VueCropper

methods: {

//放大/缩小

changeScale(num) {

console.log('changeScale')

num = num || 1;

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

//坐旋转

rotateLeft() {

console.log('rotateLeft')

this.$refs.cropper.rotateLeft();

//右旋转

rotateRight() {

console.log('rotateRight')

this.$refs.cropper.rotateRight();

//上传图片（点击上传按钮）

finish(type) {

console.log('finish')

let _this = this;

let formData = new FormData();

// 输出

if (type === 'blob') {

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

//console.log(data);

let img = window.URL.createObjectURL(data);

this.model = true;

this.modelSrc = img;

formData.append("file",data,this.fileName);

//console.log('aaaaa',img)

// let obj = {};

// obj.img = data;

// obj.imgName = this.fileName;

// data.imgName = this.fileName

console.log('aaa',data)

this.$form( host +'/message/uploadImg',{img:data}).then(o =>{

console.log('上传文件',o)

})

// this.$http.post(host +'/message/uploadImg', formData, {contentType: false, processData: false, headers:{'Content-Type': 'application/x-www-form-urlencoded'}})

// .then((response)=>{

// console.log(response)

// var res = response.data;

// // if(res.success == 1){

// // $('#btn1').val('');

// // _this.imgFile = '';

// // _this.headImg = res.realPathList[0]; //完整路径

// // _this.uploadImgRelaPath = res.relaPathList[0]; //非完整路径

// // _this.$message({　　//element-ui的消息Message消息提示组件

// // type: 'success',

// // message: '上传成功'

// // });

// // }

// })

})

} else {

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

this.model = true;

this.modelSrc = data;

})

}

// 实时预览函数

realTime(data) {

//console.log('realTime')

this.previews = data

//下载图片

down(type) {

console.log('down')

var aLink = document.createElement('a')

aLink.download = 'author-img'

if (type === 'blob') {

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

this.downImg = window.URL.createObjectURL(data)

aLink.href = window.URL.createObjectURL(data)

aLink.click()

})

} else {

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

this.downImg = data;

aLink.href = data;

aLink.click()

})

}

//选择本地图片

uploadImg(e, num) {

console.log('uploadImg');

var _this = this;

//上传图片

var file = e.target.files[0];

_this.fileName = file.name;

if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {

this.$message({

message: '图片类型必须是.gif,jpeg,jpg,png,bmp中的一种',

type: 'warning'

});

return false

}

var reader = new FileReader();

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

}

if (num === 1) {

_this.option.img = data

} else if (num === 2) {

_this.example2.img = data

}

// 转化为base64

// reader.readAsDataURL(file)

// 转化为blob

reader.readAsArrayBuffer(file);

imgLoad (msg) {

console.log('imgLoad')

console.log(msg)

}

</script>

.info {

width: 720px;

margin: 0 auto;

.oper-dv {

height:20px;

text-align:right;

margin-right:100px;

a {

font-weight: 500;

&:last-child {

margin-left: 30px;

}

.info-item {

margin-top: 15px;

label {

display: inline-block;

width: 100px;

text-align: right;

}

.sel-img-dv {

position: relative;

.sel-file {

position: absolute;

width: 90px;

height: 30px;

opacity: 0;

cursor: pointer;

z-index: 2;

}

.sel-btn {

position: absolute;

cursor: pointer;

z-index: 1;

}

.cropper-content{

display: flex;

display: -webkit-flex;

justify-content: flex-end;

-webkit-justify-content: flex-end;

.cropper{

width: 150px;

height: 150px;

}

.show-preview{

flex: 1;

-webkit-flex: 1;

display: flex;

display: -webkit-flex;

justify-content: center;

-webkit-justify-content: center;

.preview{

overflow: hidden;

border-radius: 20px;

border:1px solid #cccccc;

background: #cccccc;

margin-left: 40px;

}

.cropper-content .show-preview .preview {margin-left: 0;}

</style>

猜你喜欢