Vue+element-ui 圖片上傳剪裁組件

1，安裝插件

　　npm install vue-cropper

　　yarn add vue-cropper

2，引入

　　使用 注意： 需要關掉本地的mock服務， 不然圖片轉化會報錯

組件內使用

import { VueCropper } from 'vue-cropper' components: { VueCropper, },

main.js里面使用

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

cdn方式使用

<script src="vuecropper.js"></script> Vue.use(window['vue-cropper'])

nuxt 使用方式

if(process.browser) { vueCropper = require('vue-cropper') Vue.use(vueCropper.default) }

3，使用

創建index.vue文件

<template>
  <div>
    <!-- 多圖片上傳 -->
    <el-upload v-if="multiple" action='string' list-type="picture-card" accept="image/*" :on-preview="handlePreview" :auto-upload="false" :on-remove="handleRemove" :http-request="upload" :on-change="consoleFL" :file-list="uploadList">
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 單圖片上傳 -->
    <el-upload v-else class="avatar-uploader" action="'string'" :auto-upload="false" :show-file-list="false" :on-change="handleCrop" :http-request="upload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar" ref="singleImg" @mouseenter="mouseEnter" @mouseleave="mouseLeave" :style="{width:width+'px',height:height+'px'}">
      <i v-else class="el-icon-plus avatar-uploader-icon" :style="{width:width+'px',height:height+'px','line-height':height+'px','font-size':height/6+'px'}"></i>
      <!-- 單圖片上傳狀態顯示 -->
      <!-- <div v-if="imageUrl" class="reupload" ref="reupload" @click.stop="handlePreviewSingle" @mouseenter="mouseEnter" @mouseleave="mouseLeave" :style="{width:reuploadWidth+'px',height:reuploadWidth+'px','line-height':reuploadWidth+'px','font-size':reuploadWidth/5+'px'}">重新上傳</div> -->
      <div id="uploadIcon" v-if="imageUrl" ref="reupload" @mouseenter="mouseEnter" @mouseleave="mouseLeave" :style="{width:'100%'}">
        <i class="el-icon-zoom-in" @click.stop="handlePreviewSingle" :style="{color:'#2E2E2E',fontSize:'25px',display:'inline-block',paddingRight:'15px'}"></i>
        <i class="el-icon-upload" :style="{color:'#2E2E2E',fontSize:'25px',display:'inline-block'}"></i>
      </div>
      <div class="reupload" ref="uploading" :style="{width:reuploadWidth+'px',height:reuploadWidth+'px','line-height':reuploadWidth+'px','font-size':reuploadWidth/5+'px'}">上傳中..</div>
      <div class="reupload" ref="failUpload" :style="{width:reuploadWidth+'px',height:reuploadWidth+'px','line-height':reuploadWidth+'px','font-size':reuploadWidth/5+'px'}">上傳失敗</div>
    </el-upload>
    <!-- 多圖片預覽彈窗 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- 剪裁組件彈窗 -->
    <el-dialog :visible.sync="cropperModel" width="1100px" :before-close="beforeClose">
      <Cropper :img-file="file" ref="vueCropper" :fixedNumber="fixedNumber" @upload="upload">
      </Cropper>
    </el-dialog>
  </div>
</template>
<script>
import Cropper from './cropper';
// import axios from '@/assets/js/axios'
export default {
  name: 'uploader',
  props: {
    targetUrl: {
      // 上傳地址
      type: String,
      // default: '/storage/upload'
      default: `${process.env.API_ROOT}/sys/oss/upload`
    },
    multiple: {
      // 多圖開關
      type: Boolean,
      default: false
    },
    initUrl: {
      // 初始圖片鏈接
      default: ''
    },
    fixedNumber: {
      // 剪裁框比例設置
      default: function () {
        return [1.5, 1];
      }
    },
    width: {
      // 單圖剪裁框寬度
      type: Number,
      default: 178
    },
    height: {
      // 單圖剪裁框高度
      type: Number,
      default: 178
    }
  },
  data () {
    return {
      file: '', // 當前被選擇的圖片文件
      imageUrl: '', // 單圖情況框內圖片鏈接
      dialogImageUrl: '', // 多圖情況彈窗內圖片鏈接
      uploadList: [], // 上傳圖片列表
      reupload: true, // 控制"重新上傳"開關
      dialogVisible: false, // 展示彈窗開關
      cropperModel: false, // 剪裁組件彈窗開關
      reuploadWidth: this.height * 0.7, // 動態改變”重新上傳“大小
    };
  },
  updated () {
    if (this.$refs.vueCropper) {
      this.$refs.vueCropper.Update();
    }
  },
  watch: {
    initUrl: function (val) {
      // 監聽傳入初始化圖片
      // console.info('watch');
      if (val) {
        if (typeof this.initUrl === 'string') {
          this.imageUrl = val;
        } else {
          this.uploadList = this.formatImgArr(val);
         // this.$emit('imgupload', this.uploadList);
        }
      }
    }
  },
  mounted () {
    if (typeof this.initUrl === 'string') {
      this.imageUrl = this.initUrl;
    } else {
      this.uploadList = this.formatImgArr(this.initUrl);
    }
  },
  methods: {
    /** **************************** multiple多圖情況 **************************************/
    handlePreview (file) {
      // 點擊進行圖片展示
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }, 
    handleRemove (file, fileList) {
      // 刪除圖片后更新圖片文件列表並通知父級變化
      this.uploadList = fileList;
      this.$emit('imgupload', this.uploadList);
      // this.$emit('imgupload', this.formatImgArr(this.uploadList));
    },
    consoleFL (file, fileList) {
      // 彈出剪裁框，將當前文件設置為文件
      this.cropperModel = true;
      this.file = file;
      // this.uploadList = fileList;
    },
    /************************************************************************************/

    /** **************************** single單圖情況 **************************************/
    handlePreviewSingle (file) { // 點擊進行圖片展示
      this.dialogImageUrl = this.file.url;
      this.dialogVisible = true;
    },
    mouseEnter () { // 鼠標划入顯示“重新上傳”
      this.$refs.reupload.style.display = 'block';
      if (this.$refs.failUpload.style.display === 'block') {
        this.$refs.failUpload.style.display = 'none';
      }
      this.$refs.singleImg.style.opacity = '0.6';
    },
    mouseLeave () {
      // 鼠標划出隱藏“重新上傳”
      this.$refs.reupload.style.display = 'none';
      this.$refs.singleImg.style.opacity = '1';
    },
    handleCrop (file, files) {
      // console.log(file);
      // 點擊彈出剪裁框
      this.cropperModel = true;
      this.file = file;
      // this.imageUrl = file.url
    },
    /************************************************************************************/

    async upload (data) {
      // 自定義upload事件
      if (!this.multiple) {
        // 如果單圖，則顯示正在上傳
        this.$refs.uploading.style.display = 'block';
      }
      let img = new Image();
      img.src = data;
      img.onload = async () => {
        // let _data = this.compress(img);
        let blob = this.dataURItoBlob(data);
        let formData = new FormData(); 
        formData.append('file', blob, this.file.name); // 有的后台需要傳文件名，不然會報錯
        this.imgUpload(formData);
      };
    },
    async imgUpload(formData) {
      const res = await this.$http({
        url: 'sys/oss/upload',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      });
      if (!this.multiple) {
        // 上傳完成后隱藏正在上傳
        this.$refs.uploading.style.display = 'none';
      }
      if (res.data.code === 0) {
        // 上傳成功將照片傳回父組件
        const currentPic = res.data.url;
        if (this.multiple) {
          this.uploadList.push({
            url: currentPic,
            uid: '111'
          });
          this.$emit('imgupload', this.uploadList);// 根據自己實際項目需要將照片返回給父組件
          // this.uploadList.pop();
          // this.$emit('imgupload', this.formatImgArr(this.uploadList));
        } else {
          this.$emit('imgupload', currentPic);
        }
        this.$refs.vueCropper.isDisabled = false;
      } else {
        // 上傳失敗則顯示上傳失敗，如多圖則從圖片列表刪除圖片
        if (!this.multiple) {
          this.$refs.failUpload.style.display = 'block';
        } else {
          this.uploadList.pop();
        }
        this.$refs.vueCropper.isDisabled = false;
      }
      this.cropperModel = false;
    },
    formatImgArr (arr) {
      const result = arr.map((item, index) => {
        if (typeof item === 'string') {
          return {
            url: item,
            uid: `index${index}`
          };
        } else {
          return item.url;
        }
      });
      return result;
    },
    beforeClose () {
      // this.uploadList.pop();
      console.log(this.uploadList);
      this.cropperModel = false;
    },
    // 壓縮圖片
    compress(img) {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      // let initSize = img.src.length;
      let width = img.width;
      let height = img.height;
      canvas.width = width;
      canvas.height = height;
      // 鋪底色
      ctx.fillStyle = '#fff';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, width, height);
      // 進行壓縮
      let ndata = canvas.toDataURL('image/jpeg', 0.8);
      return ndata;
    },
    // base64轉成bolb對象
    dataURItoBlob(base64Data) {
      let byteString;
      if (base64Data.split(',')[0].indexOf('base64') >= 0) { byteString = atob(base64Data.split(',')[1]); } else { byteString = unescape(base64Data.split(',')[1]); }
      let mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
      let ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], { type: mimeString });
    }
  },
  components: {
    Cropper
  }
};
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    color: #8c939d;
    text-align: center;
  }
  .avatar {
    display: block;
  }
  .reupload {
    border-radius: 50%;
    position: absolute;
    color: #fff;
    background-color: #000000;
    opacity: 0.6;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
  }
  #uploadIcon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
  }
</style>

4，創建cropper.vue文件

 

<template>
  <div>
    <div class="cropper-content">
      <!-- 剪裁框 -->
      <div class="cropper">
        <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" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixedBox="option.fixedBox" @realTime="realTime" :fixed="option.fixed" :fixedNumber="fixedNumber"></vueCropper>
        <!-- <vueCropper ref="cropper" :img="option.img" :outputSize="option.size" :outputType="option.outputType"></vueCropper> -->
      </div>
      <!-- 預覽框 -->
      <div class="show-preview" :style="{'width': '500px', 'height': '400px',  'overflow': 'hidden', 'margin': '0 25px', 'display':'flex', 'align-items' : 'center'}">
        <div :style="previews.div" class="preview">
          <img :src="previews.url" :style="previews.img">
        </div>
      </div>
    </div>
    <div class="footer-btn">
      <!-- 縮放旋轉按鈕 -->
      <div class="scope-btn">
        <el-button type="primary" icon="el-icon-zoom-in" @click="changeScale(1)"></el-button>
        <el-button type="primary" icon="el-icon-zoom-out" @click="changeScale(-1)"></el-button>
        <el-button type="primary" @click="rotateLeft">逆時針旋轉</el-button>
        <el-button type="primary" @click="rotateRight">順時針旋轉</el-button>
      </div>
      <!-- 確認上傳按鈕 -->
      <div class="upload-btn">
        <!-- <el-button type="primary" @click="uploadImg('blob')">上傳</el-button> -->
        <el-button type="primary" :disabled="isDisabled" @click="uploadImg('base64')">上傳</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper';
// console.log(VueCropper);
export default {
  data () {
    return {
      previews: {}, // 預覽數據
      option: {
        img: '', // 裁剪圖片的地址  (默認：空)
        outputSize: 1, // 裁剪生成圖片的質量  (默認:1)
        full: false, // 是否輸出原圖比例的截圖 選true生成的圖片會非常大  (默認:false)
        outputType: 'png', // 裁剪生成圖片的格式  (默認:jpg)
        canMove: true, // 上傳圖片是否可以移動  (默認:true)
        original: false, // 上傳圖片按照原始比例渲染  (默認:false)
        canMoveBox: true, // 截圖框能否拖動  (默認:true)
        autoCrop: true, // 是否默認生成截圖框  (默認:false)
        autoCropWidth: 480, // 默認生成截圖框寬度  (默認:80%)
        autoCropHeight: 320, // 默認生成截圖框高度  (默認:80%)
        fixedBox: false, // 固定截圖框大小 不允許改變  (默認:false)
        fixed: true, // 是否開啟截圖框寬高固定比例  (默認:true)
        fixedNumber: [1.5, 1], // 截圖框比例  (默認:[1:1])
        enlarge: 1
      },
      isDisabled: false,
      downImg: '#'
    };
  },
  props: ['imgFile', 'fixedNumber'],
  methods: {
    changeScale (num) {
      // 圖片縮放
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    rotateLeft () {
      // 向左旋轉
      this.$refs.cropper.rotateLeft();
    },
    rotateRight () {
      // 向右旋轉
      this.$refs.cropper.rotateRight();
    },
    Update () {
      // this.file = this.imgFile
      this.option.img = this.imgFile.url;
    },
    realTime (data) {
      // 實時預覽
      this.previews = data;
    },
    uploadImg (type) {
      // 將剪裁好的圖片回傳給父組件
      event.preventDefault();
      this.isDisabled = true;
      let that = this;
      if (type === 'blob') {
        this.$refs.cropper.getCropBlob(data => {
          that.$emit('upload', data);
        });
      } else {
        this.$refs.cropper.getCropData(data => {
          that.$emit('upload', data);
        });
      }
    }
  },
  components: { VueCropper }
};
</script>
<style>
.cropper-content {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
.cropper-content .cropper {
  width: 500px;
  height: 400px;
}
.cropper-content .show-preview {
  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  overflow: hidden;
  border: 1px solid #cccccc;
  background: #cccccc;
  margin-left: 40px;
}
.preview {
  overflow: hidden;
  border: 1px solid #cccccc;
  background: #cccccc;
}
.footer-btn {
  margin-top: 30px;
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}
.footer-btn .scope-btn {
  width: 250px;
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.footer-btn .upload-btn {
  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
}
.footer-btn .btn {
  outline: none;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 8px 15px;
  font-size: 12px;
  border-radius: 3px;
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
</style>

 

 

 

參考：https://www.jianshu.com/p/9b4de1c5b9c0