場(chǎng)景

前后端分離的項(xiàng)目，前端修改頭像時(shí)，需要對(duì)頭像進(jìn)行裁剪并且能實(shí)時(shí)預(yù)覽，然后上傳到SpringBoot后臺(tái)。

實(shí)現(xiàn)效果如下

?

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書(shū)、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

插件官網(wǎng)

https://github.com/xyxiao001/vue-cropper

安裝插件

npm install vue-cropper

引用插件

組件內(nèi)使用 import { VueCropper }? from 'vue-cropper' components: {VueCropper, },main.js里面使用 import VueCropper from 'vue-cropper'Vue.use(VueCropper)cdn方式使用 <script src="//cdn.jsdelivr.net/npm/vue-cropper@0.4.9/dist/index.js"></script> Vue.use(window['vue-cropper'].default) nuxt 使用方式 if(process.browser) {vueCropper = require('vue-cropper')Vue.use(vueCropper.default) }

這里只是在頭像上傳組件內(nèi)使用，所以采用

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

的方式。

使用

把上傳圖片和裁剪圖片和預(yù)覽都放在一個(gè)dialog里面，只有在點(diǎn)擊修改頭像按鈕時(shí)才顯示此dialog

?

??? <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"><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"@realTime="realTime"v-if="visible"/></el-col><el-col :xs="24" :md="12" :style="{height: '350px'}"><div class="avatar-upload-preview"><img :src="previews.url" :style="previews.img" /></div></el-col></el-row><br /><el-row><el-col :lg="2" :md="2"><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}" :md="2"><el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :md="2"><el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :md="2"><el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button></el-col><el-col :lg="{span: 1, offset: 1}" :md="2"><el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button></el-col><el-col :lg="{span: 2, offset: 6}" :md="2"><el-button type="primary" size="small" @click="uploadImg()">提 交</el-button></el-col></el-row></el-dialog>

這個(gè)dialog的布局的效果如下

?

通過(guò):visible.sync="open" 綁定的是否顯示的變量為open，需要聲明

??? data() {return {// 是否顯示彈出層open: false,

然后在修改頭像按鈕的點(diǎn)擊事件中

????? // 編輯頭像editCropper() {this.open = true;},

顯示此dialog

然后圖片裁剪控件的代碼為

????????? <vue-cropperref="cropper":img="options.img":info="true":autoCrop="options.autoCrop":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":fixedBox="options.fixedBox"@realTime="realTime"v-if="visible"/>

此控件的屬性

?

名稱(chēng)	功能	默認(rèn)值	可選值
img	裁剪圖片的地址	空	url 地址 || base64 || blob
outputSize	裁剪生成圖片的質(zhì)量	1	0.1 - 1
outputType	裁剪生成圖片的格式	jpg (jpg 需要傳入jpeg)	jpeg || png || webp
info	裁剪框的大小信息	true	true || false
canScale	圖片是否允許滾輪縮放	true	true || false
autoCrop	是否默認(rèn)生成截圖框	false	true || false
autoCropWidth	默認(rèn)生成截圖框?qū)挾?/td>	容器的80%	0~max
autoCropHeight	默認(rèn)生成截圖框高度	容器的80%	0~max
fixed	是否開(kāi)啟截圖框?qū)捀吖潭ū壤?/td>	true	true | false
fixedNumber	截圖框的寬高比例	[1, 1]	[寬度, 高度]
full	是否輸出原圖比例的截圖	false	true | false
fixedBox	固定截圖框大小 不允許改變	false	true | false
canMove	上傳圖片是否可以移動(dòng)	true	true | false
canMoveBox	截圖框能否拖動(dòng)	true	true | false
original	上傳圖片按照原始比例渲染	false	true | false
centerBox	截圖框是否被限制在圖片里面	false	true | false
high	是否按照設(shè)備的dpr 輸出等比例圖片	true	true | false
infoTrue	true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀?/td>	false	true | false
maxImgSize	限制圖片最大寬度和高度	2000	0-max
enlarge	圖片根據(jù)截圖框輸出比例倍數(shù)	1	0-max(建議不要太大不然會(huì)卡死的呢)
mode	圖片默認(rèn)渲染方式	contain	contain , cover, 100px, 100% auto

這里設(shè)置此插件的一些屬性與對(duì)象options的屬性綁定。

聲明對(duì)象options并設(shè)置一些屬性

??????? options: {img: 'https://images.cnblogs.com/cnblogs_com/badaoliumangqizhi/1539113/o_qrcode_for_gh_f76a8d7271eb_258.jpg', //裁剪圖片的地址autoCrop: true, // 是否默認(rèn)生成截圖框autoCropWidth: 200, // 默認(rèn)生成截圖框?qū)挾萢utoCropHeight: 200, // 默認(rèn)生成截圖框高度f(wàn)ixedBox: true // 固定截圖框大小 不允許改變},

這里給裁剪的圖片設(shè)置了一張默認(rèn)圖片，在上傳后會(huì)重新給該img屬性賦值，img就是裁剪圖片的地址。

實(shí)時(shí)預(yù)覽是通過(guò) @realTime="realTime"

綁定的函數(shù)realTime

????? // 實(shí)時(shí)預(yù)覽realTime(data) {this.previews = data;}

會(huì)將參數(shù)data賦值給定義的對(duì)象preview

previews: {}

然后上面的布局中預(yù)覽的img是

??????? <el-col :xs="24" :md="12" :style="{height: '350px'}"><div class="avatar-upload-preview"><img :src="previews.url" :style="previews.img" /></div></el-col>

給img標(biāo)簽賦值參數(shù)的url style賦值img屬性就可。可以參照其官方案例

@realTime="realTime" // Real time preview function realTime(data) {var previews = data;var h = 0.5;var w = 0.2;this.previewStyle1 = {width: previews.w + "px",height: previews.h + "px",overflow: "hidden",margin: "0",zoom: h};this.previewStyle2 = {width: previews.w + "px",height: previews.h + "px",overflow: "hidden",margin: "0",zoom: w};固定為100寬度this.previewStyle3 = {width: previews.w + "px",height: previews.h + "px",overflow: "hidden",margin: "0",zoom: 100 / preview.w};固定為100高度this.previewStyle4 = {width: previews.w + "px",height: previews.h + "px",overflow: "hidden",margin: "0",zoom: 100 / preview.h};this.previews = data; },<div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',? 'overflow': 'hidden','margin': '5px'}"><div :style="previews.div"><img :src="option.img" :style="previews.img"></div> </div> <p>中等大小</p> <div :style="previewStyle1"><div :style="previews.div"><img :src="previews.url" :style="previews.img"></div> </div><p>迷你大小</p> <div :style="previewStyle2"><div :style="previews.div"><img :src="previews.url" :style="previews.img"></div> </div>

下方那一排的圖片的縮放和旋轉(zhuǎn)都是調(diào)用的插件自帶的函數(shù)

???? // 向左旋轉(zhuǎn)rotateLeft() {this.$refs.cropper.rotateLeft();},// 向右旋轉(zhuǎn)rotateRight() {this.$refs.cropper.rotateRight();},// 圖片縮放changeScale(num) {num = num || 1;this.$refs.cropper.changeScale(num);},

此插件的其他內(nèi)置函數(shù)

this.$refs.cropper.startCrop() 開(kāi)始截圖 this.$refs.cropper.stopCrop() 停止截圖 this.$refs.cropper.clearCrop() 清除截圖 this.$refs.cropper.changeScale() 修改圖片大小 正數(shù)為變大 負(fù)數(shù)變小 this.$refs.cropper.getImgAxis() 獲取圖片基于容器的坐標(biāo)點(diǎn) this.$refs.cropper.getCropAxis() 獲取截圖框基于容器的坐標(biāo)點(diǎn) this.$refs.cropper.goAutoCrop 自動(dòng)生成截圖框函數(shù) this.$refs.cropper.rotateRight() 向右邊旋轉(zhuǎn)90度 this.$refs.cropper.rotateLeft() 向左邊旋轉(zhuǎn)90度 圖片加載的回調(diào) imgLoad 返回結(jié)果success, error 獲取截圖信息 this.$refs.cropper.cropW 截圖框?qū)挾萾his.$refs.cropper.cropH 截圖框高度// 獲取截圖的base64 數(shù)據(jù) this.$refs.cropper.getCropData((data) => {// do somethingconsole.log(data)? })// 獲取截圖的blob數(shù)據(jù) this.$refs.cropper.getCropBlob((data) => {// do somethingconsole.log(data)? })

前端上傳圖片的實(shí)現(xiàn)是使用ElementUI的el-upload實(shí)現(xiàn)。

??????? <el-col :lg="2" :md="2"><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>

這里要對(duì)其進(jìn)行一些設(shè)置

將其action設(shè)置為#不讓其上傳到遠(yuǎn)程url，然后重寫(xiě)覆蓋其http-request

????? // 覆蓋默認(rèn)的上傳行為requestUpload() {},

來(lái)覆蓋其默認(rèn)的上傳行為。

然后重寫(xiě)其上傳前的方法進(jìn)行上傳預(yù)處理

????? // 上傳預(yù)處理beforeUpload(file) {if (file.type.indexOf("image/") == -1) {this.msgError("文件格式錯(cuò)誤，請(qǐng)上傳圖片類(lèi)型,如：JPG，PNG后綴的文件。");} else {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {this.options.img = reader.result;};}},

在方法中判斷上傳文件的類(lèi)型是否是圖片，然后獲取圖片的url并將其賦值給option的img屬性，這樣裁剪控件就能獲取到上傳的圖片的url并能顯示。

而實(shí)時(shí)預(yù)覽也能通過(guò)裁剪控件的data的url獲取到。

然后就是點(diǎn)擊提交按鈕裁剪后的照片提交給SpringBoot后臺(tái)

????? // 上傳圖片uploadImg() {this.$refs.cropper.getCropBlob(data => {let formData = new FormData();formData.append("file", data);uploadimg(formData).then(response => {if (response.code === 200) {this.open = false;this.options.img = process.env.VUE_APP_BASE_API + response.data;console.log(this.options.img)this.$emit('changezp', this.options.img)this.msgSuccess("修改成功");}this.visible = false;});});},

通過(guò)this.$refs.cropper以及設(shè)置的ref="cropper"來(lái)獲取裁剪控件，然后調(diào)用他的內(nèi)置函數(shù)獲取blob數(shù)據(jù)。

然后構(gòu)建一個(gè)FormData對(duì)象，并設(shè)置其file為裁剪圖片的data

然后將此formData采用post請(qǐng)求的方式提交到SpringBoot后臺(tái)

// 用戶(hù)頭像上傳 export function uploadAvatar(data) {return request({url: '/system/user/profile/avatar',method: 'post',data: data}) }

這里的request是封裝的axios請(qǐng)求對(duì)象向后臺(tái)發(fā)動(dòng)post請(qǐng)求并傳遞data參數(shù)。

在SpringBoot后臺(tái)

??? @PostMapping("/upload")public AjaxResult uploadProfile(MultipartFile file){try {String path = FileUploadUtils.upload(RuoYiConfig.getAvatarPath(), file);path = path.replaceAll("//","/");System.out.println("========path: " + path);return AjaxResult.success("success",path);}catch (Exception e){e.printStackTrace();return AjaxResult.error("上傳失敗");}}

就能通過(guò)MultipartFile file接受到圖片文件并上傳到服務(wù)器返回前端能訪問(wèn)靜態(tài)資源的路徑。

具體實(shí)現(xiàn)可以參照下面博客

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108383134

總結(jié)

以上是生活随笔為你收集整理的Vue中使用vue-croper插件实现图片上传裁剪并传到SpringBoot后台接口的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。