#vue# 如何裁剪上传并更换头像?
思路:
这个需求主要分为3个部分
(1)页面呈现部分
(用一个大的div进行包裹,包裹头像、图片、以及最右边的部分,通过flex进行布局(减少float的使用),3个部分的内容再细分,主要命名等等)
(2)点击更换头像交互
(3)点击更换头像请求网络接口
效果如下(右边):
demo代码如下:
<template>
<div class="userHead">
<div class="info-label">
头像
</div>
<div class="info-head">
<div class="info-img">
<img src="/static/image/use.jpg" alt="">
</div>
</div>
<div class="info-replace">
<p class="info-tips">*支持jpg、gif、png或jpeg格式的图片,
建议图片尺寸为 200×200px。建议图片大小不超过2MB。</p>
<div class="replaceBtnS">
<el-upload
:with-credentials = 'true'
ref="uploadCropper"
:show-file-list="false"
action="/"
:on-change="changeUpload"
:auto-upload="false"
style="margin-right: 10px;">
<el-button type="primary" size="small" class="replace">更换头像</el-button>
</el-upload>
</div>
<el-dialog
title="修改头像"
:visible.sync="dialogVisible"
width="800"
:before-close="handleClose">
<el-row>
<el-col :span="24" style="height: 300px;">
<vue-cropper
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"
:autoCropHeighh="option.autoCropHeight"
:fixed="option.fixed"
:fixedNumber="option.fixedNumber"
:centerBox="option.centerBox"
:infoTrue="option.infoTrue"
:fixedBox="option.fixedBox">
</vue-cropper>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" size="small" class=" cancel">取消</el-button>
<el-button type="primary" :loading="loading" @click="finish" size="small" class="hold" >确定</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
export default {
name: "head",
methods: {
handleCoverSuccess(e){
let url = e.data.url;
userUpdate({
'avatar':url
}).then(res => {
if(res.code === 200){
//更换头像成功
this.$message({
message: res.msg,
type: 'success'
});
this.$emit("updateInfo",true)
}else{
this.$message({
message: res.msg,
type: 'error'
});
}
})
},
changeUpload(file){
this.fileinfo = file
let reader = new FileReader()
reader.readAsDataURL(file.raw)
reader.onload = (e) => {
// 上传成功后将图片地址赋值给裁剪框显示图片
this.$nextTick(() => {
this.$set(this.option,'img',e.target.result)
this.dialogVisible = true
})
}
},
finish(){
this.$refs.cropper.getCropBlob(data => {
data = this.blobToFile(data)
const formData = new FormData()
formData.append('input_file',data)
this.dialogVisible = false
toolsUploadImg(formData).then(res => {
if(res.code === 200){
//上传图片成功
this.handleCoverSuccess(res)
}
}).catch(e => {
if(e.code === 500) {
this.$message.warning(e.msg)
}
})
})
},
blobToFile(data){
return new File([data],this.fileinfo.name,{type:this.fileinfo.type})
},
handleClose(){
this.dialogVisible = false
}
},
data () {
return {
imgUrl: "",
dialogVisible: false,
option: {
img: '', //裁剪图片的地址
info: true, //裁剪框的大小信息
outputSize: 0.8, // 裁剪生成图片的质量
outputType: '', // 裁剪生成图片的格式
canScale: false, // 图片是否允许滚轮缩放
autoCrop: true, //是否默认生成截图框
autoCropWidth: 300, //默认生成截图框宽度
autoCropHeight: 300,
fixedBox: false, // 固定截图框大小 是否允许改变
fixed: true, //是否开启截图框宽高固定比例
fixedNumber: [1, 1], //截图框的宽高比例
original: false, // 上传图片按照原始比例渲染
centerBox: false, // 截图框是否被限制在图片里面
infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
},
previews: {},
loading: false,
fileList: [],
uploadAccept: ['jpeg', 'jpg', 'png']
}
}
}
</script>
<style scoped>
.userHead {
display: flex;
height: .95rem;
}
.info-label {
width: .65rem;
font-size: .16rem;
font-family: SourceHanSansSC-Regular, SourceHanSansSC;
font-weight: 400;
color: #333333;
line-height: .95rem;
padding-left: .24rem;
text-align: right;
}
.info-img {
display: inline-block;
width: .95rem;
height: .95rem;
border-radius: 50%;
margin-left: .24rem;
}
.info-img img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.info-replace {
display: inline-block;
height: .95rem;
margin-left: 1rem;
}
.info-replace .info-tips {
height: .24rem;
font-size: .14rem;
font-family: SourceHanSansSC-Normal, SourceHanSansSC;
font-weight: 400;
color: #797979;
padding-top: .2rem;
}
</style>