本文實(shí)例為大家分享了vue+element實(shí)現(xiàn)圖片上傳及裁剪的具體代碼，供大家參考，具體內(nèi)容如下

隨便寫的一個(gè)小demo 功能是沒(méi)有任何問(wèn)題 可能里面會(huì)有一些小細(xì)節(jié)沒(méi)有優(yōu)化

1 、安裝 vue-cropper

npm install vue-cropper

2、組件內(nèi)使用

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

具體可見(jiàn)官網(wǎng)

demo

<template> <div> <h1>圖片上傳</h1> <div> <el-upload action='https://jsonplaceholder.typicode.com/posts/':show-file-list='false':on-success='handleAvatarSuccess':before-upload='beforeAvatarUpload' > <img v-if='imageUrl' :src='http://www.b3g6.com/bcjs/imageUrl' class='avatar'> <i v-else class='el-icon-plus avatar-uploader-icon'></i> </el-upload> </div> <el-dialog :visible.sync='dialogVisible' append-to-body> <div class='cropper-content'><div 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'>確認(rèn)</el-button> </div> </el-dialog> </div></template><script>import {VueCropper} from ’vue-cropper’export default { components: { VueCropper }, data(){ return{ imageUrl: ’’, dialogVisible: false, // 裁剪組件的基礎(chǔ)配置option option: {img: ’’, // 裁剪圖片的地址info: true, // 裁剪框的大小信息outputSize: 0.8, // 裁剪生成圖片的質(zhì)量outputType: ’jpeg’, // 裁剪生成圖片的格式canScale: false, // 圖片是否允許滾輪縮放autoCrop: true, // 是否默認(rèn)生成截圖框autoCropWidth: 100, // 默認(rèn)生成截圖框?qū)挾萢utoCropHeight: 100, // 默認(rèn)生成截圖框高度f(wàn)ixedBox: true, // 固定截圖框大小 不允許改變fixed: true, // 是否開(kāi)啟截圖框?qū)捀吖潭ū壤齠ixedNumber: [1, 1], // 截圖框的寬高比例full: true, // 是否輸出原圖比例的截圖canMoveBox: false, // 截圖框能否拖動(dòng)original: false, // 上傳圖片按照原始比例渲染centerBox: false, // 截圖框是否被限制在圖片里面infoTrue: true, // true 為展示真實(shí)輸出圖片寬高 false 展示看到的截圖框?qū)捀遚anMove:true, }, picsList: [], //頁(yè)面顯示的數(shù)組 // 防止重復(fù)提交 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(’上傳頭像圖片大小不能超過(guò) 2MB!’); } return isJPG && isLt2M; }, finish() { this.$refs.cropper.getCropBlob((data) => {var fileName = ’goods’ + this.fileinfo.uidthis.loading = true//上傳阿里云服務(wù)器//請(qǐng)求 }) } }}</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>

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。