vue input上传图片——裁剪图片

安装

npm install vue-cropper -S

全局引入：

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

下面为单组件引入：

<template>
    <el-form>
        <el-form-item label="培训图片">
                <input
                  type="file"
                  hidden
                  ref="header_img"
                  @change="handleAvatarImgChange('header_img','header_img')"
                  name="header_img"
                >
                <div class="header_img_box">
                  <img ref="train_header_img" src="../../../static/img/train.png" alt>
                  <el-button
                    style="margin-left: 20px;"
                    type="primary"
                    size="small"
                    @click="handleChooseAvatarImgFile('header_img')"
                    slot="append"
                  >选择文件
                  </el-button>
                </div>
              </el-form-item>

    </el-form>
    <!-- vueCropper 剪裁图片实现-->
      <div class="vue-cropper-box" v-if="isShowCropper">
      <div class="vue-cropper-content">
        <vue-cropper
          ref="cropper"
          :img="options.img"
          :outputSize="options.outputSize"
          :outputType="options.outputType"
          :info="options.info"
          :canScale="options.canScale"
          :autoCrop="options.autoCrop"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :fixed="options.fixed"
          :fixedNumber="options.fixedNumber"
        ></vue-cropper>
      </div>
      <div class="cropper-btnbox">
        <el-button type="primary" @click="onCubeImg">确定</el-button>
        <el-button type="danger" @click="cropperCancel">取消</el-button>
      </div>
    </div>
</template>

<script>
	export default {
         import { VueCropper } from 'vue-cropper';
		name: '',
		data() {
			return {
                // 裁剪图片
                isShowCropper: false,
			    // 裁剪组件的基础配置option
        options: {
          img: '', // 裁剪图片的地址
          info: true, // 裁剪框的大小信息
          outputSize: 1, // 裁剪生成图片的质量
          outputType: 'jpeg', // 裁剪生成图片的格式
          canScale: true, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 355, // 默认生成截图框宽度
          autoCropHeight: 266, // 默认生成截图框高度
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [5, 3] // 截图框的宽高比例
        },
			}
		},
		methods: {
                // 确定裁剪图片
      onCubeImg () {
        // 获取cropper的截图的base64 数据
        this.$refs.cropper.getCropData(data => {
          this.$refs.train_header_img.src = data;
          // 将剪裁后base64的图片转化为file格式
          let file = this.dataURLtoFile(data, 'avatar');
          this.uploadImgUrl = file;
          this.cropperCancel();
        });
      },
      // 取消裁剪
      cropperCancel () {
        this.isShowCropper = false;
        this.options.img = '';
        this.$refs.header_img.value = '';
      },
        // 将base64转换为文件对象
      dataURLtoFile (dataurl, filename) {
        let arr = dataurl.split(',');
        let mime = arr[0].match(/:(.*?);/)[1];
        let bstr = atob(arr[1]);
        let n = bstr.length;
        let u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        console.log(mime);
        // 转换成file对象
        return new File([u8arr], filename + '.' + mime.split('/')[1], {
          type: mime
        });
        // 转换成成blob对象
        // return new Blob([u8arr],{type:mime});
      },
            // 处理文件
      handleAvatarImgChange (fileInput, file1) {
        this.isShowCropper = true;
        const files = this.$refs[fileInput].files;
        let file = event.target.files[0];
        if (window.FileReader) {
          let reader = new FileReader();
          reader.readAsDataURL(file);
          // 监听文件读取结束后事件
          reader.onloadend = e => {
            this.options.img = e.target.result;
            // this.$refs.train_header_img.src = e.target.result; // e.target.result就是最后的路径地址
          };
        }
        if (files.length > 1) {
          this.addTrainForm.header_img = '';
          return this.$message.error('只能选择一个文件');
        }
        if (!files.length) {
          this.addTrainForm.header_img = '';
          return false;
          // return message.error('请选择培训宣传图');
        }
        this.$set(this.addTrainForm, file1, files[0].name);
      },
            // 选择文件
      handleChooseAvatarImgFile (fileName) {
        this.$refs[fileName].click();
      },
		},
        components: {
              
          'vue-cropper': VueCropper
        },
	} 
</script>

<style>

</style>