#vue# 【十】如何裁剪上传并更换头像？

#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>