本文实例为大家分享了vue-cropper组件实现图片切割上传的具体代码，供大家参考，具体内容如下
这几日，等来了些空闲，用vue和spring boot实践一次头像上传，因此记下了，望将来的开发有所帮助。
vue-cropper在vue中的引入
1、组件内引入
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},2、全局引入
在main.js中配置如下代码
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)3、使用示例
vue文件
<template>
<el-dialog
title="编辑头像"
:visible.sync="dialogFormVisible"
:close-on-click-modal="false"
append-to-body
>
<label class="btn" for="uploads">选择图片</label>
<input
type="file"
id="uploads"
:value="imgFile"
style="position:absolute; clip:rect(0 0 0 0);"
accept="image/png, image/jpeg, image/gif, image/jpg"
@change="uploadImg($event, 1)"
>
<div style="margin-left:20px;">
<div class="show-preview" :style="{'overflow': 'hidden', 'margin': '5px'}">
<div :style="previews.div" class="preview" style="width: 40px;height: 40px;">
<img :src="previews.url" :style="previews.img">
</div>
</div>
</div>
<div class="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>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false" size="small">取 消</el-button>
<el-button type="primary" @click="finish('blob')" size="small">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
import { VueCropper } from "vue-cropper";
export default {
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) {
let selft = this;
let formData = new FormData();
// 输出
if (type === "blob") {
selft.$refs.cropper.getCropBlob(data => {
let img = 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");
var selft = this;
//上传图片
var file = 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中的一种");
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) {
selft.option.img = data;
} else if (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>
<style lang="less">
@import "./userLogo.less";
</style>less文件
.cut {
width: 300px;
height: 300px;
margin: 0px auto;
}
.hh {
.el-dialog__header {
padding: 0px;
line-height: 2;
background-color: #f3f3f3;
height: 31px;
border-bottom: 1px solid #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: 0 1px 1px #fff;
}
.el-dialog__headerbtn {
position: absolute;
top: 8px;
right: 10px;
padding: 0;
background: 0 0;
border: none;
outline: 0;
cursor: pointer;
font-size: 16px;
}
}
.btn {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #c0ccda;
color: #1f2d3d;
text-align: center;
box-sizing: border-box;
outline: none;
//margin: 20px 10px 0px 0px;
padding: 9px 15px;
font-size: 14px;
border-radius: 4px;
color: #fff;
background-color: #50bfff;
border-color: #50bfff;
transition: all 0.2s ease;
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: 1px solid #cccccc;
background: #cccccc;
}
}发送请求的时候配置axios的Content-Type
// http request 拦截器
axios.interceptors.request.use(
config => {debugger
let token = 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'
}
return config
},
err => {
return Promise.reject(err)
}
)boot的controller
@RequestMapping("/upload")
public ResultData upload(@RequestParam("file") MultipartFile file) {
return userService.upload(file);
}boot的service
@Override
public ResultData upload(MultipartFile file) {
if (!file.isEmpty()) {
StringBuffer requestURL = sessionUtil.getRequestURL();
int end = requestURL.indexOf("/user/upload");
String basePath = requestURL.substring(0, end);
String savePath = basePath + "/static/img/logo/";
// 获取文件名称,包含后缀
String fileName = file.getOriginalFilename();
String saveDbPath = savePath + fileName;
// 存放在这个路径下：该路径是该工程目录下的static文件下：(注：该文件可能需要自己创建)
// 放在static下的原因是，存放的是静态文件资源，即通过浏览器输入本地服务器地址，加文件名时是可以访问到的
String path = ClassUtils.getDefaultClassLoader().getResource("").getPath() + "static/img/logo/";
// 该方法是对文件写入的封装，在util类中，导入该包即可使用，后面会给出方法
try {
FileUtil.fileupload(file.getBytes(), path, fileName);
// 接着创建对应的实体类，将以下路径进行添加，然后通过数据库操作方法写入
User user = sessionUtil.getSessionUser();
user.setLogo(saveDbPath);
User whereUser = new User();
whereUser.setId(user.getId());
ConfigHelper.upate(user, "user", whereUser);
Map<String, Object> map = new HashMap<>();
map.put("msg", "头像修改成功");
map.put("data", user);
return ResultData.ok(map);
} catch (IOException e) {
log.error("图片上传==》" + e.getMessage());
e.printStackTrace();
return ResultData.failed(e.getMessage());
} catch (Exception e) {
log.error("图片上次==》" + e.getMessage());
e.printStackTrace();
return ResultData.failed(e.getMessage());
}
} else {
return ResultData.failed("上传图片失败");
}
}结束
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
