3.8.1

src/components/cropper/index.js

@@ -0,0 +1,2 @@
+import Cropper from './index.vue'
+export default Cropper

src/components/cropper/index.less

@@ -0,0 +1,46 @@
+.bg{
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
+}
+.cropper-wrapper{
+  min-height: 500px;
+  display: flex;
+  justify-content: center;
+  flex-flow: column;
+  align-items: center;
+  .cropper-box {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
+  .img-box{
+    margin: 0 auto;
+    height: 540px;
+    width: 960px;
+    border: 1px solid #ebebeb;
+    display: inline-block;
+    .bg;
+    img{
+      max-width: 100%;
+      display: block;
+    }
+  }
+  
+  .button-box{
+    padding: 10px 0 0;
+    margin-bottom: 25px;
+    visibility: hidden;
+    button {
+      margin: 0 5px;
+    }
+  }
+
+  .file_logo{
+    .file_name{
+      text-align: center;
+      padding-bottom: 15px;
+    }
+  }
+  .underline {
+    display: flex;
+  }
+}

src/components/cropper/index.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="cropper-wrapper">
+    <!-- 上传图片时出现cropper -->
+    <div class="cropper-box" v-show="isImage == 1">
+      <div class="img-box">
+        <img class="cropper-image" :id="imgId">
+      </div>
+    </div>
+    <div class="button-box">
+      <div v-show="isImage == 1">
+        <Button type="primary" @click="rotate">
+          <Icon type="md-refresh" :size="18"/>
+        </Button>
+        <Button type="primary" @click="scale('X')">
+          <Icon custom="iconfont icon-shuipingfanzhuan" :size="18"/>
+        </Button>
+        <Button type="primary" @click="scale('Y')">
+          <Icon custom="iconfont icon-chuizhifanzhuan" :size="18"/>
+        </Button>
+        <Button type="primary" @click="startCrop">
+          <Icon type="md-crop" :size="18"/>
+        </Button>
+        <Button type="primary" @click="cancelCrop">
+          {{$t('reset')}}
+        </Button>
+      </div>
+    </div>
+    <!-- 其他文件时出现文件类型图片 -->
+    <div class="file_logo" v-show="isImage == 2">
+      <img :src="fileLogo">
+      <div class="file_name">{{fileName}}</div>
+    </div>
+    <div class="underline">
+
+      <Upload
+        type="drag"
+        :before-upload="beforeUpload"
+        action="image/upload"
+        v-show="!insideSrc">
+        <div style="padding: 30px 180px">
+            <Icon type="ios-cloud-upload" size="52" style="color: #ffa000"></Icon>
+            <p>{{$t('select_or_drag_img')}}</p>
+        </div>
+     </Upload>
+
+      <Upload action="image/upload" :before-upload="beforeUpload" v-show="insideSrc">
+        <Button icon="ios-cloud-upload-outline" style="width: 150px;">{{$t('choose_file')}}</Button>
+      </Upload>
+      <Button style="width: 150px;margin-left: 10px;height: 31.9px" type="primary" @click="comfirm" v-show="insideSrc">{{ cropButtonText }}</Button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import Cropper from 'cropperjs'
+import './index.less'
+import 'cropperjs/dist/cropper.min.css'
+export default {
+  name: 'Cropper',
+  props: {
+    cropButtonText: {
+      type: String,
+      default: 'submit'
+    }
+  },
+  data () {
+    return {
+      cropper: null,
+      fileSize: 0,
+      updataFile: {},
+      insideSrc: '', // 文件内容
+      infoFile: '', // 文件信息
+      fileName: '',
+      fileType: '',
+      isImage: '', // 0表示无文件 1表示文件为图片 2表示其他类型文件
+      fileLogo: ''
+    }
+  },
+  computed: {
+    imgId () {
+      return `cropper${this._uid}`
+    }
+  },
+  watch: {
+    insideSrc (src) {
+      this.replace(src)
+    }
+  },
+  methods: {
+    beforeUpload (file) {
+      // 使用html5的fileReader将图片转换成base64编码
+      // var fileSize = 0
+      this.updataFile = file
+      this.fileSize = file.size
+      const reader = new FileReader()
+      reader.readAsDataURL(file)
+      reader.onload = (event) => {
+        this.insideSrc = event.srcElement.result
+        this.fileName = file.name
+        this.fileType = file.type
+      }
+      this.fileName = file.name
+      this.fileType = file.type
+      // 判断文件类型是否为图片 0无 1为图片 2其他类型文件
+      if (/\.(jpe?g|png|gif)$/i.test(file.name)) {
+        this.isImage = 1
+      } else if (/\.(xlsx?)$/i.test(file.name)) {
+        this.isImage = 2
+        this.fileLogo = require('@/assets/icons/file-icon/xls_logo.jpg')
+      } else if (/\.(docx?)$/i.test(file.name)) {
+        this.isImage = 2
+        this.fileLogo = require('@/assets/icons/file-icon/doc_logo.jpg')
+      } else if (/\.(pptx?)$/i.test(file.name)) {
+        this.isImage = 2
+        this.fileLogo = require('@/assets/icons/file-icon/ppt_logo.jpg')
+      } else if (/\.(html)$/i.test(file.name)) {
+        this.isImage = 2
+        this.fileLogo = require('@/assets/icons/file-icon/html_logo.jpg')
+      } else {
+        this.isImage = 2
+        this.fileLogo = require('@/assets/icons/file-icon/others_logo.jpg')
+      }
+
+      return false
+    },
+    replace (src) {
+      this.cropper.replace(src)
+      this.insideSrc = src
+    },
+    rotate () {
+      this.cropper.rotate(90)
+    },
+    scale (d) {
+      this.cropper[`scale${d}`](-this.cropper.getData()[`scale${d}`])
+    },
+    move (...argu) {
+      this.cropper.move(...argu)
+    },
+    startCrop () {
+      this.cropper.crop()
+    },
+    cancelCrop () {
+      this.cropper.clear()
+    },
+    comfirm () {
+      // let dataUrl = this.insideSrc
+      let dataUrl
+      if (this.isImage === 1) {
+        dataUrl = this.cropper.getCroppedCanvas().toDataURL()
+      } else if (this.isImage === 2) {
+        dataUrl = this.insideSrc
+      }
+      let name = this.fileName
+      let type = this.fileType
+      let fileSize = this.fileSize
+      let updataFile = this.updataFile
+      let fileData = {
+        fileSize,
+        updataFile,
+        dataUrl,
+        name,
+        type
+      }
+      this.$emit('transmitInfo', fileData)
+      this.insideSrc = ''
+      this.isImage = 0
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      let dom = document.getElementById(this.imgId)
+      this.cropper = new Cropper(dom, {
+        checkCrossOrigin: true,
+        autoCrop: false
+      })
+    })
+  }
+}
+</script>