• vue2 结合 elementui 实现图片裁剪上传

    1、效果

    vue 实现图片裁剪上传

    2、准备

    第三方库：vue-cropper - npm

    npm i vue-cropper

    3、封装组件

    1. <template>
    2.   <div class="cropper-wrapper">
    3.     <!-- element 上传图片按钮 -->
    4.     <template v-if="!isPreview">
    5.       <el-upload
    6.         ref="upload"
    7.         class="upload-demo"
    8.         :action="actionUrl"
    9.         drag
    10.         :on-change="handleChangeUpload"
    11.         :auto-upload="false"
    12.         :show-file-list="false"
    13.         :disabled="disabled"
    14.       >
    15.         <i class="el-icon-plus upload-demo-icon"></i>
    16.       </el-upload>
    17.     </template>
    18.     <div v-else class="pre-box">
    19.       <el-upload
    20.         class="upload-demo"
    21.         action=""
    22.         :auto-upload="false"
    23.         :show-file-list="false"
    24.         :on-change="handleChangeUpload"
    25.         :disabled="disabled"
    26.       >
    27.         <img :src="previewImg" alt="裁剪图片" style="width: 100px;height: 100px" />
    28.       </el-upload>
    29.     </div>
    30.     <!-- vueCropper 剪裁图片实现-->
    31.     <el-dialog
    32.       title="图片剪裁"
    33.       :visible.sync="dialogVisible"
    34.       class="crop-dialog"
    35.       append-to-body
    36.     >
    37.       <div class="cropper-content">
    38.         <div class="cropper" style="text-align: center">
    39.           <VueCropper
    40.             ref="cropper"
    41.             :img="option.img"
    42.             :output-size="option.size"
    43.             :output-type="option.outputType"
    44.             :info="true"
    45.             :full="option.full"
    46.             :can-move="option.canMove"
    47.             :can-move-box="option.canMoveBox"
    48.             :original="option.original"
    49.             :auto-crop="option.autoCrop"
    50.             :fixed="option.fixed"
    51.             :fixed-number="option.fixedNumber"
    52.             :center-box="option.centerBox"
    53.             :info-true="option.infoTrue"
    54.             :fixed-box="option.fixedBox"
    55.             :auto-crop-width="option.autoCropWidth"
    56.             :auto-crop-height="option.autoCropHeight"
    57.             @cropMoving="cropMoving"
    58.           />
    59.         </div>
    60.       </div>
    61.       <div class="action-box">
    62.         <el-upload
    63.           class="upload-demo"
    64.           action=""
    65.           :auto-upload="false"
    66.           :show-file-list="false"
    67.           :on-change="handleChangeUpload"
    68.         >
    69.           <el-button type="primary">更换图片</el-button>
    70.         </el-upload>
    71.         <!-- <el-button type="primary" @click="clearImgHandle">
    72.           清除图片
    73.         </el-button> -->
    74.         <el-button type="primary" @click="rotateLeftHandle">
    75.           左旋转
    76.         </el-button>
    77.         <el-button type="primary" @click="rotateRightHandle">
    78.           右旋转
    79.         </el-button>
    80.         <!-- <el-button type="primary" plain @click="changeScaleHandle(1)">
    81.           放大
    82.         </el-button>
    83.         <el-button type="primary" plain @click="changeScaleHandle(-1)">
    84.           缩小
    85.         </el-button> -->
    86.         <el-button type="primary" @click="option.fixed = !option.fixed">
    87.           {{ option.fixed ? '固定比例' : '自由比例' }}
    88.         </el-button>
    89.         <el-button type="primary" @click="downloadHandle('blob')">
    90.           下载
    91.         </el-button>
    92.       </div>
    93.       <div style="height: 30px"></div>
    94.       <div slot="footer" class="dialog-footer">
    95.         <el-button @click="dialogVisible = false">取 消</el-button>
    96.         <el-button type="primary" :loading="loading" @click="finish">
    97.           确认
    98.         </el-button>
    99.       </div>
    100.     </el-dialog>
    101.   </div>
    102. </template>
    103.  
    104. <script>
    105. import { VueCropper }  from 'vue-cropper'
    106. import { uploadImage } from '@/api/bff'
    107. export default {
    108.   name: 'Cropper',
    109.   components: {
    110.     VueCropper,
    111.   },
    112.   model: {
    113.     prop: 'value',
    114.     event: 'input'
    115.   },
    116.   props: {
    117.     value: {
    118.       type: String,
    119.       default: ''
    120.     },
    121.     disabled: {
    122.       type: Boolean,
    123.       default: false
    124.     }
    125.   },
    126.   data() {
    127.     return {
    128.       actionUrl: process.env.VUE_APP_UPLOAD_API + '/api/v1.0/oss/upload',
    129.       isPreview: false,
    130.       dialogVisible: false,
    131.       previewImg: '', // 预览图片地址
    132.       // 裁剪组件的基础配置option
    133.       option: {
    134.         img: '', // 裁剪图片的地址
    135.         info: true, // 裁剪框的大小信息
    136.         outputSize: 1, // 裁剪生成图片的质量
    137.         outputType: 'png', // 裁剪生成图片的格式
    138.         canScale: true, // 图片是否允许滚轮缩放
    139.         autoCrop: true, // 是否默认生成截图框
    140.         canMoveBox: true, // 截图框能否拖动
    141.         autoCropWidth: 200, // 默认生成截图框宽度
    142.         autoCropHeight: 200, // 默认生成截图框高度
    143.         fixedBox: false, // 固定截图框大小 不允许改变
    144.         fixed: false, // 是否开启截图框宽高固定比例
    145.         fixedNumber: [1, 1], // 截图框的宽高比例
    146.         full: false, // 是否输出原图比例的截图
    147.         original: false, // 上传图片按照原始比例渲染
    148.         centerBox: true, // 截图框是否被限制在图片里面
    149.         infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
    150.       },
    151.       // 防止重复提交
    152.       loading: false,
    153.     };
    154.   },
    155.   watch: {
    156.     value: {
    157.       handler(val, newval) {
    158.         if (val !== newval && val) {
    159.           this.isPreview = true;
    160.           this.previewImg = val
    161.         }
    162.       },
    163.       immediate: true
    164.     }
    165.   },
    166.   methods: {
    167.     // 上传按钮 限制图片大小和类型
    168.     handleChangeUpload(file) {
    169.       const isJPG =
    170.         file.raw.type === 'image/jpeg' || file.raw.type === 'image/png';
    171.       const isLt2M = file.size / 1024 / 1024 < 2;
    172.       if (!isJPG) {
    173.         this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
    174.         return false;
    175.       }
    176.       if (!isLt2M) {
    177.         this.$message.error('上传头像图片大小不能超过 2MB!');
    178.         return false;
    179.       }
    180.       // 上传成功后将图片地址赋值给裁剪框显示图片
    181.       this.$nextTick(async () => {
    182.         // base64方式
    183.         // this.option.img = await fileByBase64(file.raw)
    184.         this.option.img = URL.createObjectURL(file.raw);
    185.         this.loading = false;
    186.         this.dialogVisible = true;
    187.       });
    188.     },
    189.     // 放大/缩小
    190.     changeScaleHandle(num) {
    191.       num = num || 1;
    192.       this.$refs.cropper.changeScale(num);
    193.     },
    194.     // 左旋转
    195.     rotateLeftHandle() {
    196.       this.$refs.cropper.rotateLeft();
    197.     },
    198.     // 右旋转
    199.     rotateRightHandle() {
    200.       this.$refs.cropper.rotateRight();
    201.     },
    202.     // 下载
    203.     downloadHandle(type) {
    204.       let aLink = document.createElement('a');
    205.       aLink.download = 'author-img';
    206.       if (type === 'blob') {
    207.         this.$refs.cropper.getCropBlob((data) => {
    208.           aLink.href = URL.createObjectURL(data);
    209.           aLink.click();
    210.         });
    211.       } else {
    212.         this.$refs.cropper.getCropData((data) => {
    213.           aLink.href = data;
    214.           aLink.click();
    215.         });
    216.       }
    217.     },
    218.     // 清理图片
    219.     clearImgHandle() {
    220.       this.option.img = '';
    221.     },
    222.     // 截图框移动回调函数
    223.     cropMoving() {
    224.       // 截图框的左上角 x，y和右下角坐标x，y
    225.       // let cropAxis = [data.axis.x1, data.axis.y1, data.axis.x2, data.axis.y2]
    226.       // console.log(cropAxis)
    227.     },
    228.     finish() {
    229.       // 获取截图的 blob 数据
    230.       this.$refs.cropper.getCropBlob((blob) => {
    231.         this.loading = true;
    232.         this.dialogVisible = false;
    233.         this.previewImg = URL.createObjectURL(blob);
    234.         this.isPreview = true;
    235.         // this.$refs.submit()
    236.         this.uploadImage(blob)
    237.       });
    238.       // 获取截图的 base64 数据
    239.       // this.$refs.cropper.getCropData(data => {
    240.       //     console.log(data)
    241.       // })
    242.     },
    243.     uploadImage(blob) {
    244.       let file = new File([blob], new Date() + '图片.png', { type: 'image/png', lastModified: Date.now() });
    245.       file.uid = Date.now();
    246.       var fd = new FormData();
    247.       fd.append("file", file, new Date() + "图片.png");
    248.       fd.append("project", "micropark_coordination");
    249.  
    250.       uploadImage(fd).then(res => {
    251.         console.log('图片上传', res)
    252.         if (res.Type === 200) {
    253.           const imageUrl = res.Data.HostSetting.External + res.Data.PathSetting.Path;
    254.           this.$emit('input', imageUrl);
    255.         }
    256.       });
    257.     }
    258.   },
    259. };
    260. </script>
    261.  
    262. <style lang="scss" scoped>
    263. :deep(.el-upload-dragger) {
    264.   width: 100px !important;
    265.   height: 100px !important;
    266. }
    267. .cropper-wrapper {
    268.   width: 100%;
    269.   height: 100%;
    270.   .upload-demo .el-upload {
    271.     border: 1px dashed #d9d9d9;
    272.     border-radius: 6px;
    273.     cursor: pointer;
    274.     position: relative;
    275.     overflow: hidden;
    276.   }
    277.   .upload-demo .el-upload:hover {
    278.     border-color: #409eff;
    279.   }
    280.   .upload-demo-icon {
    281.     font-size: 28px;
    282.     color: #8c939d;
    283.     width: 100px;
    284.     height: 100px;
    285.     line-height: 100px;
    286.     text-align: center;
    287.   }
    288.   .pre-box {
    289.     display: flex;
    290.     flex-direction: column;
    291.     align-items: center;
    292.     button {
    293.       width: 100px;
    294.       margin-top: 15px;
    295.     }
    296.   }
    297. }
    298.  
    299. .crop-dialog {
    300.   .cropper-content {
    301.     padding: 0 40px;
    302.  
    303.     .cropper {
    304.       width: auto;
    305.       height: 350px;
    306.     }
    307.   }
    308.  
    309.   .action-box {
    310.     padding: 25px 40px 0 40px;
    311.     display: flex;
    312.     justify-content: center;
    313.  
    314.     button {
    315.       width: 80px;
    316.       margin-right: 15px;
    317.     }
    318.   }
    319.  
    320.   .dialog-footer {
    321.     button {
    322.       width: 100px;
    323.     }
    324.   }
    325. }
    326. </style>

    4、使用

    <upload-picture-cropper v-model="info.UserExternalIdentify.WeChatQrCode" :disabled="isDisable" />

  • 相关阅读:
    RL note
    异或的4种堪称神奇的运用场景
    Vite入门 ｜ 青训营笔记
    1、项目准备与新建
    Java内存模型
    Golang 手写一个并发任务 manager
    Github 2024-06-20 Go开源项目日报 Top10
    设计模式(三十一)----综合应用-自定义Spring框架-自定义Spring IOC-定义解析器、IOC容器相关类
    【OJ比赛日历】快周末了，不来一场比赛吗？ #10.21-10.27 #11场
    医疗产品设计的重要性，你了解多少？
  • 原文地址：https://blog.csdn.net/qq_57952018/article/details/138082920