查看实际效果

20200927112501140.gif

引用vue-cropper

  1. npm install vue-cropper
  3. yarn add vue-cropper
  1. 全局引用
  3. import VueCropper from 'vue-cropper'
  4. Vue.use(VueCropper)
  6. 直接使用
  8. import { VueCropper } from 'vue-cropper'
  9. export default {
  10.   name: 'CropperModal',
  11.   components: {
  12.     VueCropper,
  13.   },
  14.   data() {
  15.     return {
  17.     }
  18.   },
  19. }
  20. </script>

创建组件文件夹

image.png

上传按钮组件 index.vue

  1. <template>
  2.   <div class="ant-upload-preview">
  3.     <div style="width: 100%">
  4.       <a-upload
  5.         name="avatar"
  6.         listType="picture-card"
  7.         :showUploadList="false"
  8.         :beforeUpload="beforeUpload"
  9.         :customRequest="function () {}"
  10.         @change="handleChange"
  11.       >
  12.         <img class="upload_img" v-if="imageUrl" :src="imageUrl" alt="avatar" />
  13.         <div v-else>
  14.           <a-icon :type="loading ? 'loading' : 'plus'" />
  15.           <div class="ant-upload-text">上传图片</div>
  16.         </div>
  17.       </a-upload>
  18.     </div>
  19.     <!-- modal -->
  20.     <cropper-modal
  21.       ref="CropperModal"
  22.       :imgType="imgType"
  23.       @cropper-no="handleCropperClose"
  24.       @cropper-ok="handleCropperSuccess"
  25.     ></cropper-modal>
  26.   </div>
  27. </template>
  28. <script>
  29. import CropperModal from './CropperModal'
  30. export default {
  31.   components: {
  32.     CropperModal,
  33.   },
  34.   props: {
  35.     //图片裁切配置
  36.     options: {
  37.       type: Object,
  38.       default: function () {
  39.         return {
  40.           autoCrop: true, //是否默认生成截图框
  41.           autoCropWidth: 180, //默认生成截图框宽度
  42.           autoCropHeight: 180, //默认生成截图框高度
  43.           fixedBox: false, //是否固定截图框大小 不允许改变
  44.           previewsCircle: true, //预览图是否是原圆形
  45.           title: '修改头像',
  46.         }
  47.       },
  48.     },
  49.     // 上传图片的大小，单位M
  50.     imgSize: {
  51.       type: Number,
  52.       default: 2,
  53.     },
  54.     //图片存储在oss上的上级目录名
  55.     imgType: {
  56.       type: String,
  57.       default: '',
  58.     },
  59.     // 图片地址
  60.     imageUrl: {
  61.       type: String,
  62.       default: '',
  63.     },
  64.   },
  65.   data() {
  66.     return {
  67.       loading: false,
  68.       isStopRun: false,
  69.     }
  70.   },
  72.   methods: {
  73.     //从本地选择文件
  74.     handleChange(info) {
  75.       if (this.isStopRun) {
  76.         return
  77.       }
  78.       this.loading = true
  79.       const { options } = this
  80.       this.getBase64(info.file.originFileObj, (imageUrl) => {
  81.         const target = Object.assign({}, options, {
  82.           img: imageUrl,
  83.         })
  84.         this.$refs.CropperModal.edit(target)
  85.       })
  86.     },
  87.     // 上传之前 格式与大小校验
  88.     beforeUpload(file) {
  89.       this.isStopRun = false
  90.       var fileType = file.type
  91.       if (fileType.indexOf('image') < 0) {
  92.         this.$message.warning('请上传图片')
  93.         this.isStopRun = true
  94.         return false
  95.       }
  96.       const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
  97.       if (!isJpgOrPng) {
  98.         this.$message.error('你上传图片格式不正确!')
  99.         this.isStopRun = true
  100.       }
  101.       const isLtSize = file.size < this.imgSize * 1024 * 1024
  102.       if (!isLtSize) {
  103.         this.$message.error('图片大小不能超过' + this.imgSize + 'MB!')
  104.         this.isStopRun = true
  105.       }
  106.       return isJpgOrPng && isLtSize
  107.     },
  108.     //获取服务器返回的地址
  109.     handleCropperSuccess(data) {
  110.       //将返回的数据回显
  111.       this.loading = false
  112.       this.$emit('crop-upload-success', data)
  113.     },
  114.     // 取消上传
  115.     handleCropperClose() {
  116.       this.loading = false
  117.       this.$emit('crop-upload-close')
  118.     },
  119.     getBase64(img, callback) {
  120.       const reader = new FileReader()
  121.       reader.addEventListener('load', () => callback(reader.result))
  122.       reader.readAsDataURL(img)
  123.     },
  124.   },
  125. }
  126. </script>
  128. <style lang="less" scoped>
  129. .avatar-upload-wrapper {
  130.   height: 180px;
  131.   width: 100%;
  132. }
  134. .ant-upload-preview {
  135.   background-color: #fff;
  136.   .avatar-uploader > .ant-upload {
  137.     width: 128px;
  138.     height: 128px;
  139.   }
  140.   .ant-upload-select-picture-card i {
  141.     font-size: 32px;
  142.     color: #999;
  143.   }
  144.   .upload_img {
  145.     width: 100%;
  146.   }
  147.   .ant-upload-select-picture-card .ant-upload-text {
  148.     margin-top: 8px;
  149.     color: #666;
  150.   }
  151. }
  152. </style>

模态框 CropperModal.vue

  1. <template>
  2.   <a-modal
  3.     :visible="visible"
  4.     :title="options.title"
  5.     :maskClosable="false"
  6.     :confirmLoading="confirmLoading"
  7.     :width="800"
  8.     @cancel="cancelHandel"
  9.   >
  10.     <a-row>
  11.       <a-col :xs="24" :md="12" :style="{ height: '350px' }">
  12.         <vue-cropper
  13.           ref="cropper"
  14.           :img="options.img"
  15.           :info="true"
  16.           :autoCrop="options.autoCrop"
  17.           :autoCropWidth="options.autoCropWidth"
  18.           :autoCropHeight="options.autoCropHeight"
  19.           :fixedBox="options.fixedBox"
  20.           @realTime="realTime"
  21.         >
  22.         </vue-cropper>
  23.       </a-col>
  24.       <a-col :xs="24" :md="12" :style="{ height: '350px' }">
  25.         <div :class="options.previewsCircle ? 'avatar-upload-preview' : 'avatar-upload-preview_range'">
  26.           <img :src="previews.url" :style="previews.img" />
  27.         </div>
  28.       </a-col>
  29.     </a-row>
  30.     <template slot="footer">
  31.       <a-button key="back" @click="cancelHandel">取消</a-button>
  32.       <a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
  33.     </template>
  34.   </a-modal>
  35. </template>
  36. <script>
  37. import { UpPic } from './index'
  38. export default {
  39.   name: 'CropperModal',
  40.   data() {
  41.     return {
  42.       visible: false,
  43.       img: null,
  44.       confirmLoading: false,
  46.       options: {
  47.         img: '', //裁剪图片的地址
  48.         autoCrop: true, //是否默认生成截图框
  49.         autoCropWidth: 180, //默认生成截图框宽度
  50.         autoCropHeight: 180, //默认生成截图框高度
  51.         fixedBox: true, //是否固定截图框大小 不允许改变
  52.         previewsCircle: true, //预览图是否是原圆形
  53.         title: '修改头像',
  54.       },
  55.       previews: {},
  56.       url: {
  57.         upload: '/sys/common/saveToImgByStr',
  58.       },
  59.     }
  60.   },
  62.   props: {
  63.     //图片存储在oss上的上级目录名
  64.     imgType: {
  65.       type: String,
  66.       default: '',
  67.     },
  68.   },
  69.   methods: {
  70.     edit(record) {
  71.       const { options } = this
  72.       this.visible = true
  73.       this.options = Object.assign({}, options, record)
  74.     },
  75.     /**
  76.      * 取消截图
  77.      */
  78.     cancelHandel() {
  79.       this.confirmLoading = false
  80.       this.visible = false
  81.       this.$emit('cropper-no')
  82.     },
  83.     /**
  84.      * 确认截图
  85.      */
  86.     okHandel() {
  87.       const that = this
  88.       that.confirmLoading = true
  89.       // 获取截图的base64 数据
  90.       this.$refs.cropper.getCropData((data) => {
  91.         UpPic({
  92.           img_type: this.imgType,
  93.           img_byte: data,
  94.         })
  95.           .then((res) => {
  96.             that.$emit('cropper-ok', res)
  97.           })
  98.           .catch((err) => {
  99.             that.$message.error(err)
  100.           })
  101.           .finally(() => {
  102.             that.cancelHandel()
  103.           })
  104.       })
  105.     },
  106.     //移动框的事件
  107.     realTime(data) {
  108.       this.previews = data
  109.     },
  110.   },
  111. }
  112. </script>
  114. <style lang="less" scoped>
  115. .avatar-upload-preview_range,
  116. .avatar-upload-preview {
  117.   position: absolute;
  118.   top: 50%;
  119.   transform: translate(50%, -50%);
  120.   width: 180px;
  121.   height: 180px;
  122.   border-radius: 50%;
  123.   box-shadow: 0 0 4px #ccc;
  124.   overflow: hidden;
  125.   img {
  126.     background-color: red;
  127.     height: 100%;
  128.   }
  129. }
  130. .avatar-upload-preview_range {
  131.   border-radius: 0;
  132. }
  133. </style>

ajax网络接口 index.js

  1. import request from '@/utils/request'
  2. import qs from 'qs'
  4. const Api = {
  5.     UpPic: '/UpPic',
  6. }
  8. /**
  9.  * 上传图片
  10.  * @param parameter
  11.  * @returns {*}
  12.  */
  13. export function UpPic(parameter) {
  14.     return request({
  15.         url: Api.UpPic,
  16.         method: 'post',
  17.         data: qs.stringify(parameter)
  18.     })
  19. }

使用组件

  1. <template>
  2.     <div class="container">
  3.       <image-cropper
  4.         :options="cropperOptions"
  5.         :imgSize="2"
  6.         :imgType="imgType"
  7.         :imageUrl="imgUrl"
  8.         @crop-upload-close="cropClose"
  9.         @crop-upload-success="cropSuccess"
  10.        />
  11.     </div>
  12. </template>
  14. <script>
  15. import ImageCropper from '@/components/ImageCropper'
  16. export default {
  17.   name: 'AddBanner',
  18.   data() {
  19.     return {
  20.       cropperOptions: {
  21.         autoCrop: true, //是否默认生成截图框
  22.         autoCropWidth: 200, //默认生成截图框宽度
  23.         autoCropHeight: 200, //默认生成截图框高度
  24.         fixedBox: false, //是否固定截图框大小 不允许改变
  25.         previewsCircle: false, //预览图是否是圆形
  26.         title: '上传广告图片', //模态框上显示的标题
  27.       },
  28.       imgType: 'testUp', //图片存储在oss上的上级目录名
  29.       imgUrl: '', //上传图片所得到的地址
  30.     }
  31.   },
  32.   components: {
  33.     ImageCropper,
  34.   },
  35.   methods: {
  36.     //上传操作结束
  37.     cropClose() {
  38.       console.log('上传操作结束')
  39.     },
  40.     //上传图片成功
  41.     cropSuccess(data) {
  42.       this.imgUrl = data
  43.     },
  44.   },
  45. }
  46. </script>
  48. <style lang="less" scoped>
  49. .container {
  50.   padding-top: 50px;
  51.   padding-left: 200px;
  52.   background-color: #fff;
  53.   min-height: 650px;
  54.   .a_select {
  55.     width: 220px;
  56.   }
  57. }
  58. </style>