效果图：
首先全局安装依赖 npm install --s vue-cropper
代码如下：
<template>
<div class="font-size-15-pk">
<div class="cropper-content">
<div class="cropper">
<vueCropper
ref="cropper"
:img="option.img"
:outputSize="option.size"
:outputType="option.outputType"
:info="false"
:fixed="true"
:fixedNumber="[1,1]"
:full="option.full"
:centerBox="true"
:canMove="option.canMove"
:canMoveBox="option.canMoveBox"
:original="option.original"
:autoCrop="option.autoCrop"
:fixedBox="option.fixedBox"
:autoCropWidth="option.autoCropWidth"
:autoCropHeight="option.autoCropHeight"
@realTime="realTime"
></vueCropper>
</div>
</div>
<div class="bottom-button">
<div class="selectImg">
<span class="text">选择图片</span>
<input
type="file"
class="uploads"
accept="image/*"
@change="uploadImg($event)">
</div>
<div class="uploading" @click="down()">下载图片</div>
<div class="uploading" @click="finish()">上传头像</div>
</div>
</div>
</template>
<script>
import { VueCropper } from "vue-cropper";
export default {
name:'testHeadImg',
components: {
vueCropper: VueCropper
},
data() {
return {
headImg: "",
//剪切图片上传
crap: false,
previews: {},
option: {
img: "",
outputSize: 1, //剪切后的图片质量（0.1-1）
full: false, //输出原图比例截图 props名full
outputType: "png",
canMove: true,
original: false,
canMoveBox: false,
autoCrop: true,
fixedBox: true,
autoCropWidth: 200,
autoCropHeight: 150,
},
fileName: "", //本机文件地址
imgFile:{},
downImg: "#",
uploadImgRelaPath: "" //上传后的图片的地址（不带服务器域名）
};
},
methods: {
//上传图片（点击上传按钮）
finish() {
let formData = new FormData();
// 输出
this.$refs.cropper.getCropBlob(data => {
let img = window.URL.createObjectURL(data);
console.log(img);
//下面这两个都可以
//formData.append("file", data, img);
formData.append("file", data, this.fileName);
this.$api.image(formData).then(res => {
let imgUrl=this.$resData(res);
if(imgUrl){
this.$api.modHeadPortrait({
headPortrait:imgUrl
}).then(res=>{
if(res.status===200){
// this.getUserInfo();
this.$toast({
message:"修改头像成功"
})
}else{
this.$toast({
message:"修改头像失败"
})
}
})
}else{
this.$toast({
message:"网络请求失败"
})
}
});
});
},
// 实时预览函数
realTime(data) {
console.log(data);
this.previews = data;
},
//下载图片
down() {
let aLink = document.createElement("a");
aLink.download = "author-img";
this.$refs.cropper.getCropBlob(data => {
this.downImg = window.URL.createObjectURL(data);
aLink.href = window.URL.createObjectURL(data);
aLink.click();
});
},
//选择本地图片
uploadImg(event) {
let imgFile={};
let _this = this;
//上传图片
let file = event.target.files[0];
imgFile =file;
_this.imgFile=imgFile;
_this.fileName = file.name;
if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(event.target.value)) {
alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
return false;
}
let 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;
}
_this.option.img = data;
event.target.value = ''; //避免每次选择同样的文件时，input @change 方法不执行问题
};
// 转化为base64
// reader.readAsDataURL(file)
// 转化为blob
reader.readAsArrayBuffer(file);
}
}
};
</script>
<style lang="scss">
// 底部按钮建
.bottom-button {
position: fixed;
bottom: 0;
width: 100%;
height: 4rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
box-sizing: border-box;
text-align: center;
.uploading {
padding: 10px;
// line-height: 2rem;
background: #40ce53;
color: white;
border-radius: 4px;
font-size: 15px;
}
.selectImg {
width: 80px;
height: 20px;
line-height: 20px;
padding: 10px;
color: white;
font-size: 15px;
background: #65a2e7;
border-radius: 4px;
position: relative;
}
.text{
position: absolute;
z-index: 5;
left: 15px;
}
.uploads {
opacity: 0;
position: absolute;
z-index: 99;
width: 100%;
height: 100%;
cursor: pointer;
}
}
//改变背景色
.cropper-box {
background: #333 !important;
}
//使截图框变为圆形
.cropper-crop-box {
width: 200px !important;
height: 200px !important;
overflow: hidden;
border-radius: 50% !important;
}
//截图相关样式
.cropper-content {
display: flex;
display: -webkit-flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
.cropper {
width: 100%;
height: 100%;
position: absolute;
}
.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;
margin-left: 40px;
}
}
}
</style>
更完善的查看，有旋转、放大预览、裁剪、上传功能：https://www.jianshu.com/p/eab3a2f512bf
