VUE中头像裁剪上传到服务器

最新推荐文章于 2024-01-30 17:11:39 发布

sjx19900424

最新推荐文章于 2024-01-30 17:11:39 发布

阅读量2.5k

点赞数 1

文章标签： vue vue-cropper 上传裁剪

本文链接：https://blog.csdn.net/sjx19900424/article/details/83059942

版权

在项目遇到了如题所述的需求，很是折腾了一番。毕竟写前端和移动端native是不一样的！！现在进入正题，把dom部分摆出来：

    <div>
        <vueCropper style="width: 90%;height: 260px;margin-left: 5%;margin-top: 15px"
                    ref="cropper"
                    :img="option.img"
                    :outputSize="option.outputSize"
                    :outputType="option.outputType"
                    :info="option.info"
                    :canScale="option.canScale"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    :fixed="option.fixed"
                    :fixedNumber="option.fixedNumber"></vueCropper>
        <input style="margin-left: 20px;margin-top: 15px" id="file_input" type="file" capture="camera"/>
        <div class="btn" @click="compressImg()">上传头像</div>
    </div>

可以看到，在dom中我们使用了vueCropper这个组件。这个是今天的主角，图片裁剪控件。上github：

https://github.com/xyxiao001/vue-cropper

安装：$:npm install vue-cropper -s

vue-cropper组件的属性：

名称	功能	默认值	可选值
img	裁剪图片的地址	空	url 地址 \|\| base64 \|\| blob
outputSize	裁剪生成图片的质量	1	0.1 - 1
outputType	裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg \|\| png \|\| webp
info	裁剪框的大小信息	true	true \|\| false
canScale	图片是否允许滚轮缩放	true	true \|\| false
autoCrop	是否默认生成截图框	false	true \|\| false
autoCropWidth	默认生成截图框宽度	容器的80%	0~max
autoCropHeight	默认生成截图框高度	容器的80%	0~max
fixed	是否开启截图框宽高固定比例	true	true \| false
fixedNumber	截图框的宽高比例	[1 : 1]	[宽度 : 高度]
full	是否输出原图比例的截图	false	true \| false
fixedBox	固定截图框大小不允许改变	false	true \| false
canMove	上传图片是否可以移动	true	true \| false
canMoveBox	截图框能否拖动	true	true \| false
original	上传图片按照原始比例渲染	false	true \| false
centerBox	截图框是否被限制在图片里面	false	true \| false
high	是否按照设备的dpr 输出等比例图片	true	true \| false
infoTrue	true 为展示真实输出图片宽高 false 展示看到的截图框宽高	false	true \| false
maxImgSize	限制图片最大宽度和高度	2000	0-max

内置方法通过this.$refs.cropper 调用：

this.$refs.cropper.startCrop() 开始截图

this.$refs.cropper.stopCrop() 停止截图

this.$refs.cropper.clearCrop() 清除截图

this.$refs.cropper.changeScale() 修改图片大小正数为变大负数变小

this.$refs.cropper.getImgAxis() 获取图片基于容器的坐标点

this.$refs.cropper.getCropAxis() 获取截图框基于容器的坐标点

this.$refs.cropper.goAutoCrop 自动生成截图框函数

this.$refs.cropper.rotateRight() 向右边旋转90度

this.$refs.cropper.rotateLeft() 向左边旋转90度

图片加载的回调 imgLoad 返回结果success, error

// 获取截图的base64 数据
this.$refs.cropper.getCropData((data) => {
  // do something
  console.log(data)  
})

// 获取截图的blob数据
this.$refs.cropper.getCropBlob((data) => {
  // do something
  console.log(data)  
})

好了，vue-cropper就介绍到这里。详细的可以去github里面看。

现在我们看看 input type='file' 通过Input我们可以得到选择的图片，直接放入vueCropper中来:

 mounted(){
            let _self = this;
            $("input[type='file']").change(function(){
                Indicator.open();
                let file = this.files[0];
                if (window.FileReader) {
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    //监听文件读取结束后事件    
                    reader.onloadend = function (e) {
                        _self.option.img = e.target.result;
                        Indicator.close();
                    };
                }
            });
        },

这里使用jquery来获取选取的图片，而且要放在mounted()生命周期钩子中。不能放入之前的生命的钩子中。

现在调用裁剪方法：

compressImg:function () {
                let _self = this;
                this.$refs.cropper.startCrop();
                this.$refs.cropper.getCropData((data) => {
                    let file = _self.convertBase64UrlToBlob(data);
                    file.name = 'head.jpg';
                    _self.uploadAction(file);
                })
            },

这里我们用得到的BASE64数据转换成Blob数据，直接把Blob当做file来这里，不要忘记设置file.name。不然上传文件的时候是会出错的！！得到数据之后，就开始上传了，调用你自己的ajax方法吧！这里我们使用axios来做图片上传：

  uploadAction:function (file) {
                Indicator.open();
                let _self = this;
                let param = new FormData();  // 创建form对象
                param.append('pics', file, file.name);  // 通过append向form对象添加数据
                let config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                };
                // 添加请求头
                this.$axios.post('/appapi/user/i/up-headimg/pics', param, config)
                    .then(response => {
                      if(response.status == 200){
                          let data = response.data;
                          Indicator.close();
                         //出来服务器的返回数据
                      }
                    })
                    .catch(error=>{
                        Indicator.close();
                        console.log(error);
                    })
            },

完整代码如下：


<template>
    <div>
        <vueCropper style="width: 90%;height: 260px;margin-left: 5%;margin-top: 15px"
                    ref="cropper"
                    :img="option.img"
                    :outputSize="option.outputSize"
                    :outputType="option.outputType"
                    :info="option.info"
                    :canScale="option.canScale"
                    :autoCrop="option.autoCrop"
                    :autoCropWidth="option.autoCropWidth"
                    :autoCropHeight="option.autoCropHeight"
                    :fixed="option.fixed"
                    :fixedNumber="option.fixedNumber"></vueCropper>
        <input style="margin-left: 20px;margin-top: 15px" id="file_input" type="file" capture="camera"/>
        <div class="btn" @click="compressImg()">上传头像</div>
        <span>{{status}}</span>
    </div>
</template>

<script>
    import { MessageBox, Indicator,Toast,Actionsheet  } from "mint-ui";
    import $ from 'jquery'
    import VueCropper from "vue-cropper"
    export default {
        name: "ImageUpload",
        components:{
            VueCropper,
            MessageBox,
            Indicator,
            Toast,

        },
        mounted(){
            let _self = this;
            $("input[type='file']").change(function(){
                Indicator.open();
                let file = this.files[0];
                if (window.FileReader) {
                    let reader = new FileReader();
                    reader.readAsDataURL(file);
                    //监听文件读取结束后事件    
                    reader.onloadend = function (e) {
                        _self.option.img = e.target.result;
                        Indicator.close();
                    };
                }
            });
        },
        data(){
            return{
                option: {
                    img: "",                         //裁剪图片的地址
                    info: true,                      //裁剪框的大小信息
                    outputSize: 0.7,                   // 裁剪生成图片的质量
                    outputType: 'jpeg',              //裁剪生成图片的格式
                    canScale: true,                 // 图片是否允许滚轮缩放
                    autoCrop: true,                  // 是否默认生成截图框
                    autoCropWidth: 100,              // 默认生成截图框宽度
                    autoCropHeight: 100,             // 默认生成截图框高度
                    fixed: false,                    //是否开启截图框宽高固定比例
                    fixedNumber: [4, 4]              //截图框的宽高比例
                },
                status:'',
                headImg:''
            }
        },
        methods:{
            showToast:function (msg) {
                Toast({
                    message: msg,
                    position: 'bottom',
                    duration: 2000
                })
            },
            compressImg:function () {
                let _self = this;
                this.$refs.cropper.startCrop();
                this.$refs.cropper.getCropData((data) => {
                    let file = _self.convertBase64UrlToBlob(data);
                    file.name = 'head.jpg';
                    _self.uploadAction(file);
                })
            },
            uploadAction:function (file) {
                Indicator.open();
                let _self = this;
                let param = new FormData();  // 创建form对象
                param.append('pics', file, file.name);  // 通过append向form对象添加数据
                let config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                };
                // 添加请求头
                this.$axios.post('/appapi/user/i/up-headimg/pics', param, config)
                    .then(response => {
                      if(response.status == 200){
                          let data = response.data;
                          Indicator.close();
                          //处理服务器返回数据
                      }
                    })
                    .catch(error=>{
                        Indicator.close();
                        console.log(error);
                    })
            },
            // 将base64的图片转换为file文件
            convertBase64UrlToBlob(urlData) {
                let bytes = window.atob(urlData.split(',')[1]);//去掉url的头，并转换为byte
                //处理异常,将ascii码小于0的转换为大于0
                let ab = new ArrayBuffer(bytes.length);
                let ia = new Uint8Array(ab);
                for (var i = 0; i < bytes.length; i++) {
                    ia[i] = bytes.charCodeAt(i);
                }
                return new Blob([ab], { type: 'image/jpeg' });
            },
           
        }
    }
</script>

<style scoped>
    .btn{
        width: 80%;
        height: 40px;
        margin-top: 50px;
        color: white;
        border-radius: 20px;
        background-color: #3377ff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 10%;
    }
</style>

sjx19900424

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
VUE中头像裁剪上传到服务器

在项目遇到了如题所述的需求，很是折腾了一番。毕竟写前端和移动端native是不一样的！！现在进入正题，把dom部分摆出来： &lt;div&gt; &lt;vueCropper style="width: 90%;height: 260px;margin-left: 5%;margin-top: 15px" ref="croppe...
复制链接

扫一扫