通过上传图片，在本地实现对图片的放大、缩小、旋转、裁剪操作，迅速简便地实现简单的在线图片编辑效果。 >[info] 显示效果 第一步：选择图片  第二步：裁剪、旋转  >[info] 示例代码 ``` <template> <el-container> <el-main> <el-row> <el-col :span="18"> <el-upload :auto-upload="false" :on-change="changeUpload" :show-file-list="false" action drag> <i class="el-icon-upload"></i> <div class="el-upload__text">点击上传</div> <div class="el-upload__tip">支持绝大多数图片格式，单张图片最大支持5MB</div> </el-upload> </el-col> </el-row> </el-main> <!-- vueCropper 剪裁图片实现--> <el-dialog :visible.sync="cropDialogVisible" append-to-body title="图片剪裁"> <el-form :inline="true" :size="miniSize"> <el-container> <el-main class="cropper-container"> <VueCropper :autoCrop="option.autoCrop" :canMove="option.canMove" :canMoveBox="option.canMoveBox" :centerBox="option.centerBox" :fixed="option.fixed" :fixedBox="option.fixedBox" :fixedNumber="option.fixedNumber" :full="option.full" :img="option.img" :info="true" :infoTrue="option.infoTrue" :original="option.original" :outputSize="option.size" :outputType="option.outputType" ref="cropper"> </VueCropper> </el-main> <el-footer> <el-form-item> <el-button-group> <el-button @click="changeScale(1)" icon="el-icon-ali-fangda" round type="primary"></el-button> <el-button @click="changeScale(-1)" icon="el-icon-ali-suoxiao" round type="primary"></el-button> <el-button @click="rotateLeft" icon="el-icon-ali-left" round type="primary"></el-button> <el-button @click="rotateRight" icon="el-icon-ali-right" round type="primary"></el-button> </el-button-group> </el-form-item> </el-footer> </el-container> </el-form> <div class="dialog-footer" slot="footer"> <el-button :size="normalSize" @click="cropDialogVisible = false" round>取 消</el-button> <el-button :loading="loading" :size="normalSize" @click="uploadCropData" round type="primary">确认</el-button> </div> </el-dialog> </el-container> </template> <script> import { VueCropper } from "vue-cropper"; export default { components: { VueCropper }, computed: {}, props: { imgUrl: { type: String, default: "", }, }, data () { return { normalSize: "small", miniSize: "mini", attachGroupId: 1, attachId: 100, loading: false, cropDialogVisible: false, // 裁剪组件的基础配置option option: { img: this.imgUrl, // 裁剪图片的地址 info: true, // 裁剪框的大小信息 outputSize: 0.8, // 裁剪生成图片的质量 outputType: "png", // 裁剪生成图片的格式 canScale: true, // 图片是否允许滚轮缩放 autoCrop: true, // 是否默认生成截图框 fixedBox: false, // 固定截图框大小 不允许改变 fixedNumber: [7, 5], // 截图框的宽高比例 full: false, // 是否输出原图比例的截图 canMoveBox: true, // 截图框能否拖动 original: false, // 上传图片按照原始比例渲染 centerBox: true, // 截图框是否被限制在图片里面 infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 }, cropper: null, }; }, methods: { // 上传按钮,限制图片大小 changeUpload (file, fileList) { const _isLt5M = file.size / 1024 / 1024 < 5; if (!_isLt5M) { this.$notify.error({ title: "错误", message: "上传文件大小不能超过 5MB!", }); return false; } // 上传成功后将图片地址赋值给裁剪框显示图片 this.$nextTick(() => { const _reader = new FileReader(); _reader.readAsDataURL(file.raw); _reader.onload = (e) => { let _data; if (typeof e.target.result === "object") { // 把Array Buffer转化为blob 如果是base64不需要 _data = window.URL.createObjectURL( new Blob([e.target.result]) ); } else { _data = e.target.result; } this.option.img = _data; this.cropDialogVisible = true; }; }); }, // 点击裁剪,这一步是可以拿到处理后的地址 uploadCropData () { const _formData = new FormData(); this.$refs.cropper.getCropBlob((blobData) => { this.loading = true; // data是裁剪后图片的blob对象 _formData.append("file", blobData); _formData.append("pathType", "attachment"); this.$axios({ url: "cms/upload", method: "post", data: _formData, headers: { "Content-Type": "multipart/form-data" }, }) .then(async (result) => { this.cropDialogVisible = false; // 后续处理 this.loading = false; }) .catch((err) => { console.log(err); this.loading = false; }); }) }, // 放大/缩小 changeScale (num) { num = num || 1; this.$refs.cropper.changeScale(num); }, // 左旋转 rotateLeft () { this.$refs.cropper.rotateLeft(); }, // 右旋转 rotateRight () { this.$refs.cropper.rotateRight(); }, setDragMode () { this.$refs.cropper.setDragMode("crop"); }, } }; </script> ``` >[info] 属性说明参见vue-cropper 组件使用说明