vue+element+vue-cropper实现图片裁剪功能
1、下载插件：npm install --save vue-cropper
2、全局注册插件挂在到全局的vue上
import { VueCropper } from 'vue-cropper';
Vue.component('VueCropper',VueCropper);
html部分：
element 的el-upload插件
上传图片插件
<el-upload
class="avatar-uploader"
:action="UPLOAD_FILE"
:show-file-list="false"
:on-change="selectImgFn"
:auto-upload="false"
:before-upload="beforeUpload">
<img v-if="form.imgurl" :src="form.imgurl" class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
裁剪图片框：
<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"
:fixedBox="option.fixedBox"
:fixedNumber="option.fixedNumber"
></vueCropper>
js
data部分：
export default {
data() {
return {
fileName："",
newImgUrl:"",
option: {
img: '', // 裁剪图片的地址
info: true, // 裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: 'png', // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, // 是否默认生成截图框
autoCropWidth: 300, // 默认生成截图框宽度
autoCropHeight: 210, // 默认生成截图框高度
fixedBox: true, // 固定截图框大小 不允许改变
fixed: true, // 是否开启截图框宽高固定比例
fixedNumber: [3, 1], // 截图框的宽高比例
full: true, // 是否输出原图比例的截图
canMoveBox: false, // 截图框能否拖动
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
canMove:true,
fileinfo:{}
},
}
}
上传图片部分：
// 文件上传el-upload需要用到on-change方法其他的方法回触发自动上传
selectImgFn(file) {
this.fileName = file.name;
if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(file.name)) {
this.$message({
message: '图片类型要求：jpeg、jpg、png',
type: "error"
});
return false
}
在插件上展示图片
this.option.img = URL.createObjectURL(file.raw);
},
裁剪完之后上传
finish(){
this.$refs.cropper.getCropBlob((data) => {
// let file = new File([data], this.fileName, {type: this.fileName.split('.')[1]});
// data转换为bolb之后是没有name的,后段接收到file之后需要获取到文件的名称；
data.name=this.fileName;
console.log('data',data);
upload(this.actionsUlr,data).then(res=>{
if(res.Data == 200){
this.newImgUrl = res.Data;
}
});
});
}
上传图片js封装
import axios from 'axios'
export function upload(api, file) {
var data = new FormData()
data.append('file', file)
return axios.post(api, data,)
}
备注：弹窗这里没有添加，自己用el-dialog就可以了
页面效果：
