vue + element + vue-cropper 實現圖片裁剪上傳

這個地方搞了好久，其實也不能說好久，其實很簡單，只不過第一次弄的話，可能會遇到很多坑。

安裝 vue-cropper

npm install vue-cropper

使用

main.js里面

import VueCropper from 'vue-cropper'
Vue.use(VueCropper)

關於HTML部分的代碼

上傳組件不能自動上傳，並且要設置一個 on-change 方法。

:auto-upload="false" :on-change="changeUpload"

<el-upload ref="pic" list-type="picture-card" action="" :auto-upload="false" :on-change="changeUpload"
    :on-success="handleAvatarSuccess" :show-file-list="false">
    <img v-if="inputForm.pic" :src="inputForm.pic" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    <div slot="tip" class="el-upload__tip">請上傳長寬為1270*622尺寸並且格式為.jpg或.png的圖片文件</div>
</el-upload>



	<!-- vueCropper 剪裁圖片實現-->
    <el-dialog title="圖片剪裁" :visible.sync="dialogVisible" append-to-body>
      <div class="cropper-content">
        <div class="cropper" style="text-align:center">
          <vueCropper 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" :fixed="option.fixed"
            :fixedNumber="option.fixedNumber" :centerBox="option.centerBox" :infoTrue="option.infoTrue"
            :fixedBox="option.fixedBox"></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish" :loading="loading">確認</el-button>
      </div>
    </el-dialog>

關於js代碼

	data() {
      return {
        dialogVisible: false,
        option: {
          img: '', // 裁剪圖片的地址
          info: true, // 裁剪框的大小信息
          outputSize: 1, // 裁剪生成圖片的質量
          outputType: 'jpeg', // 裁剪生成圖片的格式
          canScale: false, // 圖片是否允許滾輪縮放
          autoCrop: true, // 是否默認生成截圖框
          // autoCropWidth: 300, // 默認生成截圖框寬度
          // autoCropHeight: 200, // 默認生成截圖框高度
          fixedBox: false, // 固定截圖框大小 不允許改變
          fixed: true, // 是否開啟截圖框寬高固定比例
          fixedNumber: [1270, 622], // 截圖框的寬高比例
          full: true, // 是否輸出原圖比例的截圖
          canMoveBox: true, // 截圖框能否拖動
          original: false, // 上傳圖片按照原始比例渲染
          centerBox: false, // 截圖框是否被限制在圖片里面
          infoTrue: true // true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高
        },
      }
    },



	  // 上傳按鈕   限制圖片大小
      changeUpload(file, fileList) {
        let testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
        const isJPG = testmsg === 'jpg'
        const isPNG = testmsg === 'png'
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上傳頭像圖片只能是 JPG 或 PNG 格式!');
          return
        }
        var reader = new FileReader();
        let data
        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
          }
        }
        this.$nextTick(() => {
          this.option.img = file.url
          this.dialogVisible = true
        })
      },
      // 點擊裁剪，這一步是可以拿到處理后的地址
      finish() {
        this.$refs.cropper.getCropBlob((data) => {
          let fd = new FormData()
          fd.append('file', data)
          this.$http({
            url: `文件上傳地址`,
            method: 'post',
            data: fd,
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(({ data }) => {
            if (data.code === 200) {
              this.inputForm.pic = data.url;  // 返回路徑賦值
              this.dialogVisible = false
            } else {
              this.$message.error(data.msg);
            }
          })
        })
      },

坑

我在這個地方陷了好久，一定要設置 cropper 的高度，不然會顯示 NaN x NaN

<style scoped>
  /* 截圖 */
  .cropper {
    width: auto;
    height: 300px;
  }
</style>