vue+element实现图片上传及裁剪功能

1 、安装 vue-cropper

1	npm install vue-cropper

2、组件内使用

1 2 3 4

import { VueCropper } from 'vue-cropper' components: {  VueCropper, },

demo

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128

<template>   <div>     <h1>图片上传</h1>     <div>       <el-upload         class="avatar-uploader"         action="https://jsonplaceholder.typicode.com/posts/"         :show-file-list="false"         :on-success="handleAvatarSuccess"         :before-upload="beforeAvatarUpload"       >       <img v-if="imageUrl" :src="imageUrl" class="avatar">       <i v-else class="el-icon-plus avatar-uploader-icon"></i>       </el-upload>     </div>     <el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body>       <div class="cropper-content">         <div class="cropper" style="text-align:center">           <vueCropper             ref="cropper"             :img="option.img"             :outputSize="option.outputSize"             :outputType="option.outputType"             :info="option.info"             :canScale="option.canScale"             :autoCrop="option.autoCrop"             :autoCropWidth="option.autoCropWidth"             :autoCropHeight="option.autoCropHeight"             :fixed="option.fixed"             :fixedBox="option.fixedBox"             :fixedNumber="option.fixedNumber"           ></vueCropper>         </div>       </div>       <div slot="footer" class="dialog-footer">         <el-button @click="dialogVisible = false">取 消</el-button>         <el-button type="primary" @click="finish" :loading="loading">确认</el-button>       </div>     </el-dialog>   </div> </template> <script> import {VueCropper} from 'vue-cropper' export default {   components: {     VueCropper   },   data(){     return{       imageUrl: '',       dialogVisible: false,       // 裁剪组件的基础配置option       option: {         img: '', // 裁剪图片的地址         info: true, // 裁剪框的大小信息         outputSize: 0.8, // 裁剪生成图片的质量         outputType: 'jpeg', // 裁剪生成图片的格式         canScale: false, // 图片是否允许滚轮缩放         autoCrop: true, // 是否默认生成截图框         autoCropWidth: 100, // 默认生成截图框宽度         autoCropHeight: 100, // 默认生成截图框高度         fixedBox: true, // 固定截图框大小 不允许改变         fixed: true, // 是否开启截图框宽高固定比例         fixedNumber: [1, 1], // 截图框的宽高比例         full: true, // 是否输出原图比例的截图         canMoveBox: false, // 截图框能否拖动         original: false, // 上传图片按照原始比例渲染         centerBox: false, // 截图框是否被限制在图片里面         infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高         canMove:true,       },       picsList: [], //页面显示的数组       // 防止重复提交       loading: false,       fileinfo:{}     }   },   methods: {    handleAvatarSuccess(res, file,fileList) {     //上传成功后将图片地址赋值给裁剪框显示图片     this.$nextTick(() => {       this.option.img = URL.createObjectURL(file.raw);       this.fileinfo = res       this.dialogVisible = true     })    },    beforeAvatarUpload(file) {     const isJPG = file.type === 'image/jpeg'||file.type==='image/png';     const isLt2M = file.size / 1024 / 1024 < 2;        if (!isJPG) {      this.$message.error('上传头像图片只能是 JPG 格式!');     }     if (!isLt2M) {      this.$message.error('上传头像图片大小不能超过 2MB!');     }     return isJPG && isLt2M;    },     finish() {       this.$refs.cropper.getCropBlob((data) => {         var fileName = 'goods' + this.fileinfo.uid         this.loading = true         //上传阿里云服务器         //请求       })     }   } } </script> <style scoped>   .avatar-uploader{     background:red!important;     width:150px;height:150px;     text-align: center;     line-height: 150px;   }   .el-icon-plus{     width:150px;height:150px;font-size:30px;   }   .cropper-content{     width:500px;height:500px;background: pink;   }   .cropper{     width:500px;     height:500px;     background: yellow;   } </style>