vue制作的pc系統中(如若依系統)，需要實現按照固定尺寸進行裁剪后再進行圖片上傳，以下代碼講述的是實現單張圖片裁剪上傳。
1.第一步需要安裝vue-cropper
npm install vue-cropper2.第二步在需要的頁面進入代碼引入
import {VueCropper} from "vue-cropper"3.第三步封裝子組件
<template><div><div class="user-info-head" @click="editCropper()"><img v-bind:src="options.img" title="點擊上傳頭像" class="img-lg" /></div><el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened" @close="closeDialog"><el-row><el-col :xs="24" :md="12" :style="{height: '350px'}"><vue-cropperref="cropper":img="options.img":info="true":autoCrop="options.autoCrop":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":fixedBox="options.fixedBox":outputType="options.outputType"@realTime="realTime"v-if="visible"/></el-col><el-col :xs="24" :md="12" :style="{height: '350px'}"><div class="avatar-upload-preview-update"><img :src="previews.url" :style="previews.img" /></div></el-col></el-row><br /><el-row><el-col :lg="2" :sm="3" :xs="3"><el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload"><el-button size="small">選擇<i class="el-icon-upload el-icon--right"></i></el-button></el-upload></el-col><el-col :lg="{span: 1, offset: 2}" :sm="2" :xs="2"><el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"><el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"><el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :sm="2" :xs="2"><el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button></el-col><el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2"><el-button type="primary" size="small" @click="uploadImg()">提 交</el-button></el-col></el-row></el-dialog></div>
</template><script>
import store from "@/store"
import { VueCropper } from "vue-cropper"
import { uploadCommonImg } from "@/api/system/user"
import { debounce } from '@/utils'export default {components: { VueCropper },props: {url: {type: String,default: ""},},data() {return {// 是否顯示彈出層open: false,// 是否顯示croppervisible: false,// 彈出層標題title: "修改頭像",options: {img: '', //裁剪圖片的地址autoCrop: true, // 是否默認生成截圖框autoCropWidth: 162, // 默認生成截圖框寬度autoCropHeight: 200, // 默認生成截圖框高度fixedBox: true, // 固定截圖框大小 不允許改變outputType:"png", // 默認生成截圖為PNG格式filename: 'avatar' // 文件名稱},previews: {},resizeHandler: null}},mounted() {this.options.img= this.url?(process.env.VUE_APP_BASE_API +this.url):''},methods: {// 編輯頭像editCropper() {this.open = true},// 打開彈出層結束時的回調modalOpened() {this.visible = trueif (!this.resizeHandler) {this.resizeHandler = debounce(() => {this.refresh()}, 100)}window.addEventListener("resize", this.resizeHandler)},// 刷新組件refresh() {this.$refs.cropper.refresh()},// 覆蓋默認的上傳行為requestUpload() {},// 向左旋轉rotateLeft() {this.$refs.cropper.rotateLeft()},// 向右旋轉rotateRight() {this.$refs.cropper.rotateRight()},// 圖片縮放changeScale(num) {num = num || 1this.$refs.cropper.changeScale(num)},// 上傳預處理beforeUpload(file) {if (file.type.indexOf("image/") == -1) {this.$modal.msgError("文件格式錯誤，請上傳圖片類型,如：JPG，PNG后綴的文件。")} else {const reader = new FileReader()reader.readAsDataURL(file)reader.onload = () => {this.options.img = reader.resultthis.options.filename = file.name}}},// 上傳圖片uploadImg() {this.$refs.cropper.getCropBlob(data => {let formData = new FormData()formData.append("file", data, this.options.filename)uploadCommonImg(formData).then(response => {this.open = falsethis.options.img = process.env.VUE_APP_BASE_API + response.fileNameconsole.log('this.options.img',this.options.img)this.$emit('outUrl', response.fileName)this.visible = false})})},// 實時預覽realTime(data) {this.previews = data},// 關閉窗口closeDialog() {// this.options.img =''this.visible = falsewindow.removeEventListener("resize", this.resizeHandler)}}
}
</script>
<style scoped lang="scss">
.user-info-head {position: relative;display: inline-block;height: 120px;
}.user-info-head:hover:after {content: '+';position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #eee;background: rgba(0, 0, 0, 0.5);font-size: 24px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;cursor: pointer;line-height: 110px;//border-radius: 50%;text-align: center;
}
</style>
4.第四步，父級頁面引入該子組件
//其中url是父組件進行子組件的初始化傳值 outUrl是接收子組件傳遞過來的參數 <imgCrop @outUrl="getUrl" :url="form.peoImage"/>5.第五步 接收子組件傳遞過來的參數
getUrl(url) {this.form.peoImage = url},因為我用的若依系統，ruoyi.css中集成了上述組件中的樣式 ，粘貼如下：
/**
* 通用css樣式布局處理
* Copyright (c) 2019 ruoyi
*//** 基礎通用 **/
.pt5 {padding-top: 5px;
}.pr5 {padding-right: 5px;
}.pb5 {padding-bottom: 5px;
}.mt5 {margin-top: 5px;
}.mr5 {margin-right: 5px;
}.mb5 {margin-bottom: 5px;
}.mb8 {margin-bottom: 8px;
}.ml5 {margin-left: 5px;
}.mt10 {margin-top: 10px;
}.mr10 {margin-right: 10px;
}.mb10 {margin-bottom: 10px;
}
.ml10 {margin-left: 10px;
}.mt20 {margin-top: 20px;
}.mr20 {margin-right: 20px;
}.mb20 {margin-bottom: 20px;
}
.ml20 {margin-left: 20px;
}.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {font-family: inherit;font-weight: 500;line-height: 1.1;color: inherit;
}.el-message-box__status + .el-message-box__message{word-break: break-word;
}.el-dialog:not(.is-fullscreen) {margin-top: 6vh !important;
}.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;
}.el-table {.el-table__header-wrapper, .el-table__fixed-header-wrapper {th {word-break: break-word;background-color: #f8f8f9;color: #515a6e;height: 40px;font-size: 13px;}}.el-table__body-wrapper {.el-button [class*="el-icon-"] + span {margin-left: 1px;}}
}/** 表單布局 **/
.form-header {font-size: 15px;color: #6379bb;border-bottom: 1px solid #ddd;margin: 8px 10px 25px 10px;padding-bottom: 5px
}/** 表格布局 **/
.pagination-container {display: flex;justify-content: flex-end;margin-top: 20px;
}/* tree border */
.tree-border {margin-top: 5px;border: 1px solid #e5e6e7;background: #FFFFFF none;border-radius: 4px;
}@media (max-width: 768px) {.pagination-container .el-pagination > .el-pagination__jump {display: none !important;}.pagination-container .el-pagination > .el-pagination__sizes {display: none !important;}
}.el-table .fixed-width .el-button--mini {padding-left: 0;padding-right: 0;width: inherit;
}/** 表格更多操作下拉樣式 */
.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {cursor: pointer;margin-left: 5px;
}.el-table .el-dropdown, .el-icon-arrow-down {font-size: 12px;
}.el-tree-node__content > .el-checkbox {margin-right: 8px;
}.list-group-striped > .list-group-item {border-left: 0;border-right: 0;border-radius: 0;padding-left: 0;padding-right: 0;
}.list-group {padding-left: 0px;list-style: none;
}.list-group-item {border-bottom: 1px solid #e7eaec;border-top: 1px solid #e7eaec;margin-bottom: -1px;padding: 11px 0px;font-size: 13px;
}.pull-right {float: right !important;
}.el-card__header {padding: 14px 15px 7px;min-height: 40px;
}.el-card__body {padding: 15px 20px 20px 20px;
}.card-box {margin-bottom: 10px;
}/* button color */
.el-button--cyan.is-active,
.el-button--cyan:active {background: #20B2AA;border-color: #20B2AA;color: #FFFFFF;
}.el-button--cyan:focus,
.el-button--cyan:hover {background: #48D1CC;border-color: #48D1CC;color: #FFFFFF;
}.el-button--cyan {background-color: #20B2AA;border-color: #20B2AA;color: #FFFFFF;
}/* text color */
.text-navy {color: #1ab394;
}.text-primary {color: inherit;
}.text-success {color: #1c84c6;
}.text-info {color: #23c6c8;
}.text-warning {color: #f8ac59;
}.text-danger {color: #ed5565;
}.text-muted {color: #888888;
}/* image */
.img-circle {border-radius: 50%;
}.img-lg {width: 120px;height: 120px;
}.avatar-upload-preview {position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 200px;height: 200px;border-radius: 50%;box-shadow: 0 0 4px #ccc;overflow: hidden;
}
.avatar-upload-preview-update {position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);width:162px;height: 200px;//border-radius: 50%;box-shadow: 0 0 4px #ccc;overflow: hidden;
}
.swiper-upload-preview-update {position: relative;top: 50%;left: 50%;transform: translate(-50%, -50%);width:352px;height: 150px;//border-radius: 50%;box-shadow: 0 0 4px #ccc;overflow: hidden;
}
/* 拖拽列樣式 */
.sortable-ghost {opacity: .8;color: #fff !important;background: #42b983 !important;
}.top-right-btn {position: relative;float: right;
}/* 分割面板樣式 */
.splitpanes.default-theme .splitpanes__pane {background-color: #fff!important;
}
6.至此完結。
