vue2.9 使用croppa实现图像裁剪并上传服务器 （croppa裁剪工具 + element 框架搭建）

 

首先安装croppa

npm install --save vue-croppa

安装完成之后，在需要的页面引入

      import Vue from "vue";
      //引用Croppa图片裁剪
      import Croppa from "vue-croppa";
      import "vue-croppa/dist/vue-croppa.css";
     
      Vue.use(Croppa);

 

其中基本参数

    v-model="croppa"                        绑定别名croppa来操作js
    :show-remove-button="false"      是否显示取消按钮（默认true）
    :width="360" :height="360"          设置默认宽高

    :prevent-white-space="true"        防止出现空白（默认false）

    accept="image/png"                     接受文件类型

    :initial-image=“http://....”               默认加载的图像

    initial-size="natural"                     初始大小不缩放 （cover，contain，natural）

    initial-position="center"                初始位置剧中（left，right，top，bottom，center，100% 20%）

    :zoom-speed="10"                       缩放/放大 速度

    :disabled="false"                          禁止选中

    :disable-click-to-choose="true"    禁止再次点击

    :show-loading="true"                    是否展示加载动画

    :loading-size="50"                        加载动画大小

    :loading-color="#606060"             加载动画颜色

    placeholder="选择图片"                默认提示文字

    placeholder-color="#000"              默认提示文字颜色

    :placeholder-font-size="16"           默认提示文字大小

 

 

在template模板中添加el弹框组件和croppa裁剪组件

              <!-- 引用el的dialog弹框组件，默认data中设置croppaVisible=true -->
              <el-dialog title="图片裁剪" :visible.sync="croppaVisible" width="640px" :before-close="handleClose">
                <div class="croppa_box">
                  <croppa v-model="croppa" :show-remove-button="false" :width="360" :height="360" :prevent-white-space="true" initial-size="natural"
                    initial-position="center" :initial-image="'http://t00img.yangkeduo.com/goods/images/2018-07-19/15a2e96caa3851da064e464cf60eea3a.jpeg'"></croppa>
                  <div class="croppa_btns_box">
                    <div class="croppa_btns_box_top">
                      <el-tooltip class="item" effect="dark" content="上移" placement="top">
                        <el-button type="primary" circle @click="croppa.moveUpwards(10)" icon="el-icon-arrow-up"></el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="下移" placement="top">
                        <el-button type="primary" circle @click="croppa.moveDownwards(10)" icon="el-icon-arrow-down"></el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="左移" placement="top">
                        <el-button type="primary" circle @click="croppa.moveLeftwards(10)" icon="el-icon-arrow-left"></el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="右移" placement="top">
                        <el-button type="primary" circle @click="croppa.moveRightwards(10)" icon="el-icon-arrow-right"></el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="放大" placement="top">
                        <el-button type="primary" circle @click="croppa.zoomIn(10)" icon="el-icon-zoom-in"></el-button>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="缩小" placement="top">
                        <el-button type="primary" circle @click="croppa.zoomOut(10)" icon="el-icon-zoom-out"></el-button>
                      </el-tooltip>
                    </div>
                    <div class="croppa_btns_box_bottom">
                      <el-button type="primary" round @click="croppa.rotate()">旋转90°</el-button>
                      <el-button type="primary" round @click="croppa.rotate(2)">旋转180°</el-button>
                      <el-button type="primary" round @click="croppa.rotate(-1)">旋转-90°</el-button>
                      <el-button type="primary" round @click="croppa.flipX()">水平翻转</el-button>
                      <el-button type="primary" round @click="croppa.flipY()">垂直翻转</el-button>
                    </div>
                  </div>
                </div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="croppaVisible = false">取 消</el-button>
                        <el-button type="primary" @click="uploadCroppedImage">确 定</el-button>
                </span>
              </el-dialog>

 

点击确认按钮，进行文件的上传

文件上传接口和post两处不同

一：是header设置为'Content-Type': 'multipart/form-data'

二：千万不要对data数据进行Qs.stringify()...太坑了

在data中添加变量

 croppa: {}

在methods中添加方法

    //图片裁剪
        uploadCroppedImage() {
          let that = this;
          this.croppa.generateBlob(
            blob => {
              // 编写代码上传裁剪的图像文件
              // this.croppa.generateDataUrl() base64
              // console.log(blob);
              let formdata = new FormData();
              formdata.append("file", blob, "image.png"); //封装到formdata中
              //uploadFile接口和post两处不同
              //一：是header设置为'Content-Type': 'multipart/form-data'
              //二：千万不要对data数据进行Qs.stringify()...太坑了
              that.$http.uploadFile(上传地址, formdata).then(res => {
                console.log(res);
                let data = res.data;
                if (data.status) {
                  that.$message.success("保存成功");
                  that.dialogVisible = false;
                }
              });
            },
            "image/jpeg",
            0.8
          ); // 80%压缩文件
        }

就可以直接从服务器中获取到文件地址并使用了

官网实例

https://zhanziyang.github.io/vue-croppa/#/