vue-cropper组件如何实现图片切割上传

小编给大家分享一下vue-cropper组件如何实现图片切割上传，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

vue-cropper在vue中的引入

1、组件内引入

import{VueCropper}from'vue-cropper'
components:{
VueCropper,
},

2、全局引入

在main.js中配置如下代码

importVueCropperfrom'vue-cropper'

Vue.use(VueCropper)

3、使用示例

vue文件

<template>
<el-dialog
title="编辑头像"
:visible.sync="dialogFormVisible"
:close-on-click-modal="false"
append-to-body
>
<labelclass="btn"for="uploads">选择图片</label>
<input
type="file"
id="uploads"
:value="imgFile"

accept="image/png,image/jpeg,image/gif,image/jpg"
@change="uploadImg($event,1)"
>
<div>
<divclass="show-preview":>
<div:class="preview">
<img:src="previews.url":>
</div>
</div>
</div>
<divclass="cut">
<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>
<divslot="footer"class="dialog-footer">
<el-button@click="dialogFormVisible=false"size="small">取消</el-button>
<el-buttontype="primary"@click="finish('blob')"size="small">确定</el-button>
</div>
</el-dialog>
</template>

<script>
import{VueCropper}from"vue-cropper";
exportdefault{
components:{
VueCropper
},
data(){
return{
previews:{},
model:false,
modelSrc:"",
fileName:"",
imgFile:"",
dialogFormVisible:false,
option:{
img:"",
outputSize:1,//剪切后的图片质量（0.1-1）
full:false,//输出原图比例截图props名full
outputType:"png",
canMove:true,
original:false,
canMoveBox:true,
autoCrop:true,
autoCropWidth:40,
autoCropHeight:40,
fixedBox:true
}
};
},
methods:{
//上传图片（点击上传按钮）
finish(type){
letselft=this;
letformData=newFormData();
//输出
if(type==="blob"){
selft.$refs.cropper.getCropBlob(data=>{
letimg=window.URL.createObjectURL(data);
selft.model=true;
selft.modelSrc=img;
formData.append("file",data,selft.fileName);
selft.$api.writer.userUpload(formData,r=>{
if(r.code){
selft.$alert.error(r.msg);
}else{
selft.$message({
message:r.data.msg,
type:"success"
});
selft.$store.state.userInfo=r.data.data;
selft.dialogFormVisible=false;
}
});
});
}else{
this.$refs.cropper.getCropData(data=>{});
}
},
//选择本地图片
uploadImg(e,num){
console.log("uploadImg");
varselft=this;
//上传图片
varfile=e.target.files[0];
selft.fileName=file.name;
if(!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)){
alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
returnfalse;
}
varreader=newFileReader();
reader.onload=e=>{
letdata;
if(typeofe.target.result==="object"){
//把ArrayBuffer转化为blob如果是base64不需要
data=window.URL.createObjectURL(newBlob([e.target.result]));
}else{
data=e.target.result;
}
if(num===1){
selft.option.img=data;
}elseif(num===2){
selft.example2.img=data;
}
};
//转化为base64
//reader.readAsDataURL(file)
//转化为blob
reader.readAsArrayBuffer(file);
},
show(){
this.dialogFormVisible=true;
},
//实时预览函数
realTime(data){
console.log("realTime");
this.previews=data;
},
imgLoad(msg){
console.log("imgLoad");
console.log(msg);
}
}
};
</script>

<stylelang="less">
@import"./userLogo.less";
</style>

less文件

.cut{
width:300px;
height:300px;
margin:0pxauto;
}

.hh{
.el-dialog__header{
padding:0px;
line-height:2;
background-color:#f3f3f3;
height:31px;
border-bottom:1pxsolid#e5e5e5;
background:#f3f3f3;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.el-dialog__title{
float:left;
height:31px;
color:#4c4c4c;
font-size:12px;
line-height:31px;
overflow:hidden;
margin:0;
padding-left:10px;
font-weight:bold;
text-shadow:01px1px#fff;
}
.el-dialog__headerbtn{
position:absolute;
top:8px;
right:10px;
padding:0;
background:00;
border:none;
outline:0;
cursor:pointer;
font-size:16px;
}
}

.btn{
display:inline-block;
line-height:1;
white-space:nowrap;
cursor:pointer;
background:#fff;
border:1pxsolid#c0ccda;
color:#1f2d3d;
text-align:center;
box-sizing:border-box;
outline:none;
//margin:20px10px0px0px;
padding:9px15px;
font-size:14px;
border-radius:4px;
color:#fff;
background-color:#50bfff;
border-color:#50bfff;
transition:all0.2sease;
text-decoration:none;
user-select:none;
}

.show-preview{
flex:1;
-webkit-flex:1;
display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
.preview{
overflow:hidden;
border-radius:50%;
border:1pxsolid#cccccc;
background:#cccccc;
}
}

发送请求的时候配置axios的Content-Type

//httprequest拦截器
axios.interceptors.request.use(
config=>{debugger
lettoken=sessionStorage.getItem('token')
if(token){
config.headers.Authorization=token;
}
if(config&&config.url&&config.url.indexOf('upload')>0){
config.headers['Content-Type']='multipart/form-data'
}
returnconfig
},
err=>{
returnPromise.reject(err)
}
)

boot的controller

@RequestMapping("/upload")
publicResultDataupload(@RequestParam("file")MultipartFilefile){
returnuserService.upload(file);
}

boot的service

@Override
publicResultDataupload(MultipartFilefile){
if(!file.isEmpty()){

StringBufferrequestURL=sessionUtil.getRequestURL();
intend=requestURL.indexOf("/user/upload");
StringbasePath=requestURL.substring(0,end);
StringsavePath=basePath+"/static/img/logo/";
//获取文件名称,包含后缀
StringfileName=file.getOriginalFilename();

StringsaveDbPath=savePath+fileName;

//存放在这个路径下：该路径是该工程目录下的static文件下：(注：该文件可能需要自己创建)
//放在static下的原因是，存放的是静态文件资源，即通过浏览器输入本地服务器地址，加文件名时是可以访问到的
Stringpath=ClassUtils.getDefaultClassLoader().getResource("").getPath()+"static/img/logo/";

//该方法是对文件写入的封装，在util类中，导入该包即可使用，后面会给出方法
try{
FileUtil.fileupload(file.getBytes(),path,fileName);
//接着创建对应的实体类，将以下路径进行添加，然后通过数据库操作方法写入
Useruser=sessionUtil.getSessionUser();
user.setLogo(saveDbPath);
UserwhereUser=newUser();
whereUser.setId(user.getId());
ConfigHelper.upate(user,"user",whereUser);
Map<String,Object>map=newHashMap<>();
map.put("msg","头像修改成功");
map.put("data",user);
returnResultData.ok(map);
}catch(IOExceptione){
log.error("图片上传==》"+e.getMessage());
e.printStackTrace();
returnResultData.failed(e.getMessage());
}catch(Exceptione){
log.error("图片上次==》"+e.getMessage());
e.printStackTrace();
returnResultData.failed(e.getMessage());
}

}else{
returnResultData.failed("上传图片失败");
}
}

以上是“vue-cropper组件如何实现图片切割上传”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道！