vue项目中使用vue-cropper实现裁剪、上传到oss接口

深藏阁楼爱情的钟 2023-03-12 14:30 9阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70][]

实现步骤：

1，项目中添加vue-cropper插件 ：npm install vue-cropper --save   或者 yarn add vue-cropper --save

2,在main.js中引入一下：

import VueCropper from 'vue-cropper'

Vue.use(VueCropper)

3，.vue文件内容：

<template>
      <div style="width:1200px;margin:12px auto 0 auto;display:flex;justify-content:space-between;">
        
        <a-card style="width:260px;">
          
          <a-avatar :size="80" :src="src2" 
    style="margin:0 auto;display:flex;" @click="myPortrait"/>
          
          
          <a-row>
            <a-col :span="24" 
    style="font-size:12px;color:#767885;display:flex;justify-content:center;">
              <a-button @click="alertPassword">修改密码</a-button>
            </a-col>
          </a-row>
        </a-card>
        
          <a-modal title="修改头像" v-model="visible2" :footer="null" 
    :bodyStyle="{padding:0}" @cancel="resetForm">
          <a-row style="padding:24px 24px 16px 24px;margin:0;">
            <a-col :span="16">
              <div class="cropper">
                <vueCropper
                  ref="cropper"
                  :img="option.img"
                  :outputSize="option.size"
                  :outputType="option.outputType"
                  :info="option.info"
                  :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"
                ></vueCropper>
              </div>
            </a-col>
            <a-col :span="8" style="text-align: center;">
              <div class="preview">
                
                <img :src="previews.url" :style="previews.img" />
              </div>
              <div style="text-align:center;">头像预览</div>
            </a-col>
          </a-row>
          <a-row style="padding:0 0 8px 24px;margin:0;">
            <a-col :span="24">
              <label class="btn" for="uploads" style="color:#3264D5;">上传头像</label>
              <input
                type="file"
                id="uploads"
                :value="imgFile"
                style="position:absolute; clip:rect(0 0 0 0);width: 1px;"
                accept="image/png, image/jpeg, image/gif, image/jpg"
                @change="uploadImg($event, 1)"
              />
            </a-col>
          </a-row>
          <a-row>
            <a-col
              :span="24"
              style="display:flex;justify-content:center;border-top:1px solid #e8e8e8;padding:14px 0;"
            >
              <a-button type="primary" @click="submitForm" style="background:#3264D5;">确定</a-button>
              <a-button style="margin-left: 10px" @click="resetForm">取消</a-button>
            </a-col>
          </a-row>
        </a-modal> 
      </div>
    </template>
    <script>
    import { baseUrl } from '@/api/manage'
    import { uploadImage } from '@/api/api'  // 引入接口
    export default {
      data() {
        return {
          src2:'', 
          src: '../../assets/tx.png', // 头像默认地址
          visible: false, // 修改密码弹窗是否显示的标志
          labelCol: { span: 4 },
          wrapperCol: { span: 14 }, 
           visible2: false,
          //剪切图片上传
          previews: {},
          option: {
            img: "", // 裁剪图片的地址
            outputSize: 1, // 裁剪生成图片的质量
            outputType: "png", // 裁剪生成图片的格式
            info: true, // 裁剪框的大小信息
            canScale: false, // 图片是否允许滚轮缩放
            // autoCrop: false, // 是否默认生成截图框
            autoCrop: true, // 是否默认生成截图框
            autoCropWidth: 120, // 默认生成截图框宽度
            autoCropHeight: 120, // 默认生成截图框高度
            fixedBox: true, // 固定截图框大小 不允许改变
            fixed: true, // 是否开启截图框宽高固定比例
            fixedNumber: [1, 1], // 截图框的宽高比例
            canMove: true, // 上传图片是否可以移动
            canMoveBox: true, // 截图框能否拖动
            original: false, // 上传图片按照原始比例渲染
            centerBox: true, // 截图框是否被限制在图片里面
            infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
            full: false, // 是否输出原图比例的截图
            enlarge: 0.5, // 图片根据截图框输出比例倍数
            mode: "contain" // 图片默认渲染方式 
          },
          fileName: "", // 本机文件地址
          downImg: "#",
          imgFile: "", 
        }
      },
      /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
      created() { 
      },
      computed: {},
      methods: {   
        // 点击我的头像触发
        myPortrait(){
            this.visible2 = true;
        },  
        // 点击修改头像弹窗的确定按钮触发
      submitForm() {
          this.$refs.cropper.getCropData((data) => {
           // 拿到的data 其实是base64格式的图片
            var blob = this.dataURItoBlob(data); // 调用方法将base64格式的转为二进制大对象格式
            var fd = new FormData();
            fd.append("file", blob);
            fd.append("ossModuleCode","image")
            // 该接口用于上传图片；后台要求的是 formData 格式的，所以将blob放入FormData；下面的接口根据自己需要进行更改
            uploadImage(fd).then(res=>{
    // 接口返回的res.data.imgUrl 是一个图片的链接，以 .blob格式结尾的；放入img标签的src可以显示图片
                this.src2 = res.data.imgUrl
              })
          }) 
        },
    // 该方法将base64格式的图片转换为blob格式；blob：二进制大对象
       dataURItoBlob(base64Data) {
        var byteString;
        if (base64Data.split(',')[0].indexOf('base64') >= 0){
            byteString = atob(base64Data.split(',')[1]);
        }else{
            byteString = unescape(base64Data.split(',')[1]);
        }
        var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
        var ia = new Uint8Array(byteString.length);
        for (var i = 0; i < byteString.length; i++) {
            ia[i] = byteString.charCodeAt(i);
        }
        return new Blob([ia], {type:mimeString});
    },
        // 点击修改头像弹窗的取消按钮触发
        resetForm() {
            this.visible2 = false;
            setTimeout(()=>{
              this.option.img = '';
            },500)
        },  
        // 实时预览函数
        realTime(data) {
          this.previews = data;
        }, 
        // 选择本地图片
        uploadImg(e, num) {
          var _this = this;
          // 上传图片
          var file = e.target.files[0];
          _this.fileName = file.name;
          if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
    //改提示使用了ant-design-vue中的提示框，项目中需要引入ant-design-vue，不想使用该提示可以注释，使用alert()
            this.$message.warning("图片类型必须是.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) {
              _this.option.img = data;
            } else if (num === 2) {
              _this.example2.img = data;
            }
          };
          // 转化为base64
          // reader.readAsDataURL(file)
          // 转化为blob
          reader.readAsArrayBuffer(file);
        },
      }
    }
    </script>
    <style lang="scss" scoped>
    .col-3 { color: #767885; font-size: 14px;  text-align: right; }
    .col-6 { color: #3c3d43; font-size: 14px; padding-left: 24px; font-weight: 500; }
    .password { text-align: right; }
    .password2 {  padding-left: 16px; }
    .ant-row { margin: 16px 0; }
    .cropper {  width: 100%; height: 300px; }
    .preview { width: 120px; height: 120px;  border-radius: 50%; 
    border: 1px solid #ccc; background-color: #ccc; margin: 5px; overflow: hidden; 
    display: inline-block; }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70]: /images/20230312/59ff7aae9f8d4d249960ccf128c01153.png