通過上傳圖片，在本地實現對圖片的放大、縮小、旋轉、裁剪操作，迅速簡便地實現簡單的在線圖片編輯效果。 >[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 組件使用說明