|
|
@@ -0,0 +1,125 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-dialog
|
|
|
+ v-loading="loading"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :visible.sync="isShow"
|
|
|
+ :title="'图片裁剪'"
|
|
|
+ :modal-append-to-body="false"
|
|
|
+ :append-to-body="true"
|
|
|
+ :fullscreen="false"
|
|
|
+ width="700px"
|
|
|
+ custom-class="xl-dialog"
|
|
|
+ center
|
|
|
+ >
|
|
|
+ <div class="scoped-upload">
|
|
|
+ <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"
|
|
|
+ :fixed="option.fixed"
|
|
|
+ :fixedNumber="option.fixedNumber"
|
|
|
+ :centerBox="option.centerBox"
|
|
|
+ :infoTrue="option.infoTrue"
|
|
|
+ :fixedBox="option.fixedBox">
|
|
|
+ </vueCropper>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="xl-form">
|
|
|
+ <div class="xl-form-footer">
|
|
|
+ <el-button class="xl-form-btn t2" @click="close">关 闭</el-button>
|
|
|
+ <el-button class="xl-form-btn t1" @click="close('confirm')">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import axios from 'axios'
|
|
|
+export default {
|
|
|
+ name: 'CropperImg',
|
|
|
+ props: {
|
|
|
+ isShow: Boolean,
|
|
|
+ curObj: Object,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: true,
|
|
|
+ option: {
|
|
|
+ img: '', //裁剪图片的地址
|
|
|
+ outputSize: 1, // 裁剪生成图片的质量
|
|
|
+ outputType: 'png', // 裁剪生成图片的格式
|
|
|
+ full: false, // 是否输出原图比例的截图
|
|
|
+ info: true, // 图片大小信息
|
|
|
+ canScale: true, // 图片是否允许滚轮缩放
|
|
|
+ autoCrop: true, // 是否默认生成截图框
|
|
|
+ autoCropWidth: 375, // 默认生成截图框宽度
|
|
|
+ autoCropHeight: 300, // 默认生成截图框高度
|
|
|
+ canMove: true, // 上传图片是否可以移动
|
|
|
+ fixedBox: true, // 固定截图框大小 不允许改变
|
|
|
+ fixed: false, // 是否开启截图框宽高固定比例
|
|
|
+ canMoveBox: true, // 截图框能否拖动
|
|
|
+ original: false, // 上传图片按照原始比例渲染
|
|
|
+ centerBox: false, // 截图框是否被限制在图片里面
|
|
|
+ height: true,
|
|
|
+ infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
|
|
|
+ enlarge: 2, // 图片根据截图框输出比例倍数
|
|
|
+ mode: 'cover', // 图片默认渲染方式
|
|
|
+ maxImgSize: 750 // 限制图片最大宽度和高度
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isShow: function(val) {
|
|
|
+ if (val) {
|
|
|
+ this.option.img = this.curObj.url
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ close(str) {
|
|
|
+ if (str === 'confirm') {
|
|
|
+ this.$refs.cropper.getCropBlob((data) => {
|
|
|
+ let newData = new FormData()
|
|
|
+ newData.append('token', 'B4mtpOy9yz0c72Y2+FqmkzjrBb2tKqB8j2HHe9zwh9Y80BpvEj2FANMdq5yFCc+cvFSJM3V9m5bq')
|
|
|
+ newData.append('upload', data, 'honglou.jpg')
|
|
|
+ axios({
|
|
|
+ method: 'post',
|
|
|
+ url: process.env.VUE_APP_BASE_API + '/adm/upload/cloudpub',
|
|
|
+ data: newData
|
|
|
+ }).then(res => {
|
|
|
+ const cData = res.data
|
|
|
+ if (cData.errno === 0) {
|
|
|
+ const cObj = cData.data || {}
|
|
|
+ this.$emit('close', cObj.url)
|
|
|
+ } else {
|
|
|
+ this.$msgw(cData.errmsg)
|
|
|
+ }
|
|
|
+ // console.log(cData)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$emit('close')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.scoped-upload {
|
|
|
+ text-align: center;
|
|
|
+ .cropper {
|
|
|
+ width: auto;
|
|
|
+ height: 500px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
