封装的分页功能

裁切组件的封装----需要安装vue-cropper

<template>
  <div :class="$options.name" >
      <el-dialog
        class="dialog"
        :visible.sync="dialogVisible"
        width="600px"
        :before-close="handleClose"
        :modal="false"
      >
        <div
          class="cropper-container">
          <div class="cropper-el">
            <vue-cropper
              ref="cropper"
              :img="cropperImg"
              :output-size="option.size"
              :output-type="option.outputType"
              :info="true"
              :full="option.full"
              :can-move="option.canMove"
              :can-move-box="option.canMoveBox"
              :fixed-box="option.fixedBox"
              :original="option.original"
              :auto-crop="option.autoCrop"
              :auto-crop-width="option.autoCropWidth"
              :auto-crop-height="option.autoCropHeight"
              :center-box="option.centerBox"
              :high="option.high"
              :info-true="option.infoTrue"
              @realTime="realTime"
              :enlarge="option.enlarge"
              :fixed="option.fixed"
              :fixed-number="option.fixedNumber"
            />
          </div>
          <!-- 预览 -->
          <div
            class="prive-el">
            <div
              class="prive-style"
              :style="{'width': '150px', 'height': '266px', 'overflow': 'hidden', 'margin': '0 25px', 'display':'flex', 'align-items' : 'center'}">
              <div
                class="preview"
                :style="previews.div">
                <img
                  :src="previews.url"
                  :style="previews.img">
              </div>
            </div>
            <el-button
              @click="uploadBth"
              v-if="option.img">重新上传
            </el-button>
          </div>
        </div>
        <span
          slot="footer"
          class="dialog-footer">
        <el-button
          @click="handleClose">取 消</el-button>
        <el-button
          type="primary"
          @click="saveImg"
        >确 定</el-button>
      </span>
      </el-dialog>

  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'

export default {
  name: 'Cropper',
  components: {
    VueCropper
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    imgType: {
      type: String,
      default: 'blob'
    },
    cropperImg: {
      type: String,
      default: ''
    },
    width:Number,
    height: Number
  },
  data () {
    return {
      previews: {},
      option: {
        img: '', // 裁剪图片的地址
        size: 1, // 裁剪生成图片的质量
        full: false, // 是否输出原图比例的截图 默认false
        outputType: 'png', // 裁剪生成图片的格式 默认jpg
        canMove: false, // 上传图片是否可以移动
        fixedBox: false, // 固定截图框大小 不允许改变
        original: false, // 上传图片按照原始比例渲染
        canMoveBox: true, // 截图框能否拖动
        autoCrop: true, // 是否默认生成截图框
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 160, // 默认生成截图框宽度
        autoCropHeight: 90, // 默认生成截图框高度
        centerBox: true, // 截图框是否被限制在图片里面
        high: false, // 是否按照设备的dpr 输出等比例图片
        enlarge: 1, // 图片根据截图框输出比例倍数
        mode: 'contain', // 图片默认渲染方式
        maxImgSize: 2000, // 限制图片最大宽度和高度
       // limitMinSize: [100, 120], // 更新裁剪框最小属性
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        fixed: true, // 是否开启截图框宽高固定比例  (默认:true)
        fixedNumber: [this.width,this.height] // 截图框的宽高比例
      },
    }
  },
  methods: {
    // 裁剪时触发的方法，用于实时预览
    realTime (data) {
      this.previews = data
    },
    // 重新上传
    uploadBth () {
      this.$emit('update-cropper')
    },
    // 取消关闭弹框
    handleClose () {
      this.$emit('colse-dialog', false)
    },
    // 获取裁剪之后的图片，默认blob，也可以获取base64的图片
    saveImg () {
      if (this.imgType === 'blob') {
        this.$refs.cropper.getCropBlob(data => {
          this.$emit('upload-img', data)
        })
      } else {
        this.$refs.cropper.getCropData(data => {
          this.uploadFile = data
          this.$emit('upload-img', data)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Cropper {
  .cropper-el {
    height: 300px;
    width: 300px;
  }

  .cropper-container {
    display: flex;
    justify-content: space-between;

    .prive-el {
      height: 164px;
      width: 94px;
      flex: 1;
      text-align: center;

      .prive-style {
        flex: 1;
        -webkit-flex: 1;
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        -webkit-justify-content: center;
        overflow: hidden;
        background: #ededed;
        margin: 0 auto 0 40px;
      }

      .preview {
        overflow: hidden;
      }

      .el-button {
        margin-top: 20px;
      }
    }
  }
}
</style>

上传组件的封装

<template>
  <div :class="$options.name">
    <el-upload
      :on-remove="handleRemove"
      v-show="!resultImg"
      class="upload-el"
      accept="image/*"
      ref="fileUpload"
      name="pic"
      :action="action"
      :data="uploadData"
      :on-change="selectChange"
      :show-file-list="false"
      :auto-upload="false"
      :http-request="httpRequest">
      <img :src="image" v-if="judgeId!==0" class="edit-image">
      <div v-if="judgeId!==0" class="update-img-desc">* 点击图片进行重新选择编辑！</div>
      <div  v-if="judgeId===0">
        <span class="icon upload-icon"/>
        <el-button class="choose-button">选择图片</el-button>
      </div>
    </el-upload>
    <figure
      v-show="resultImg"
      class="result-img">
      <img :src="resultImg" @click="updateCropper">
      <div v-if="resultImg" class="update-img-desc">*点击图片进行重新上传新图片！</div>
    </figure>
    <cropper
      v-if="showCropper"
      :dialog-visible="showCropper"
      :cropper-img="cropperImg"
      @update-cropper="updateCropper"
      @colse-dialog="closeDialog"
      @upload-img="uploadImg"
      :width="width"
      :height="height"
    />
  </div>
</template>

<script>
import Cropper from './Cropper.vue'

export default {
  name: 'UploadImg',
  components: {
    Cropper
  },
  props: {
    width: Number,
    height: Number,
    //判断父组件点击的是添加还是编辑
    judgeId: Number,
    //向父组件获取点击编辑按钮时的图片URL
    image: String
  },
  data () {
    return {
      uploadData: { // 上传需要的额外参数
        siteId: 1,
        source: 1,
        fileName: ''
      },
      action: 'http://106.13.150.219:8090/api/Common/CommonMethod/PostUploadImage', // 上传地址，必填
      cropperImg: '', // 需要裁剪的图片
      showCropper: false, // 是否显示裁剪框
      uploadFile: '', // 裁剪后的文件
      resultImg: '' // 上传成功，后台返回的路径
    }
  },
  methods: {
    // submit 之后会触发此方法
    httpRequest (request) {
      console.log('+++++++++++++')
      console.log(JSON.stringify(request))
      //action:裁剪后的图片地址
      //data:裁剪后的图片名称/图片数量/图片id
      //filename:图片名称
      const {
        action,
        data,
        filename
      } = request
      // 新建formDate对象
      let formData = new FormData()
      for (let key in data) {
        formData.append(key, data[key])
      }

      // 文件单独push,第三个参数指定上传的文件名
      formData.append(filename, this.uploadFile, data.fileName)
      //请求接口
      this.axios({
        headers: {
          contentType: 'multipart/form-data' // 需要指定上传的方式
        },
        url: action,
        method: 'post',
        data: formData,
        timeout: 200000000 // 防止文件过大超时
      }).then((resp) => {
        this.$message.success('图片上传成功')
        this.resultImg = resp.Url + resp.Image // 上传成功后展示的图片
        this.$emit('showImage', this.resultImg)
      }).catch(err => {
        console.log(err)
      })
    },
    // 选择文件
    selectChange (file) {
      const {
        raw,
        name
      } = file
      this.openCropper(raw)
      this.uploadData.fileName = name
    },
    /**
     * @param {file} 上传的文件
     */
    openCropper (file) {
      let files = file
      let isLt5M = files.size > (5 << 20)
      if (isLt5M) {
        this.$message.error('请上传5M内的图片')
        return false
      }
      let 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
        }
        this.cropperImg = data
      }
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(files)
      this.showCropper = true
    },
    // 上传图片
    uploadImg (file) {
      this.uploadFile = file
      this.$refs.fileUpload.submit()
      this.showCropper = false
      //提交后清空文件
      this.$refs.fileUpload.clearFiles()
    },
    // 更新图片
    updateCropper () {
      this.$refs.fileUpload.$children[0].$el.click()
    },
    // 关闭窗口
    closeDialog () {
      this.showCropper = false
    },
    handleRemove (file, fileList) {
      console.log(file)
      console.log(fileList)
    },

  }
}
</script>

<style lang="scss" scoped>
.UploadImg {
  .el-upload {
    display: block;
    width: 100px;
    margin: 30px auto 0;
  }

  .upload-icon {
    display: block;
    height: 44px;
    width: 52px;
    background-image: url(~@/assets/img/upload-image.png);
    background-position: 100% 100%;
    margin: 0 auto 20px;
  }

  .video-image {
    display: flex;
  }

  .result-img img {
    height: 90px;
    width: 160px;
  }
}

.edit-image {
  height: 90px;
  width: 160px;
}

.choose-button {
  margin-top: 10px;
}

 .update-img-desc {
  color: #DC143C !important;
  font-size: 12px !important;
  font-weight: bold !important;
}

</style>

使用

//引入封装好的图片上传+裁剪的组件
import UploadImg from '../../../components/base/uploadPictures/UploadImg'

components: {
  UploadImg
},

<upload-img
  @showImage="showImage"
  class="image-style"
  :width="16"
  :height="9"
  :judge-id="judgeId"
  :image="form.Image"
>
</upload-img>