本文實例為大家分享了vue+element實現圖片上傳及裁剪的具體代碼，供大家參考，具體內容如下

隨便寫的一個小demo 功能是沒有任何問題 可能里面會有一些小細節沒有優化

1 、安裝 vue-cropper

npm install vue-cropper

2、組件內使用

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

具體可見官網

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.hdgsjgj.cn/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'>確認</el-button> </div> </el-dialog> </div></template><script>import {VueCropper} from ’vue-cropper’export default { components: { VueCropper }, data(){ return{ imageUrl: ’’, dialogVisible: false, // 裁剪組件的基礎配置option option: {img: ’’, // 裁剪圖片的地址info: true, // 裁剪框的大小信息outputSize: 0.8, // 裁剪生成圖片的質量outputType: ’jpeg’, // 裁剪生成圖片的格式canScale: false, // 圖片是否允許滾輪縮放autoCrop: true, // 是否默認生成截圖框autoCropWidth: 100, // 默認生成截圖框寬度autoCropHeight: 100, // 默認生成截圖框高度fixedBox: true, // 固定截圖框大小 不允許改變fixed: true, // 是否開啟截圖框寬高固定比例fixedNumber: [1, 1], // 截圖框的寬高比例full: true, // 是否輸出原圖比例的截圖canMoveBox: false, // 截圖框能否拖動original: false, // 上傳圖片按照原始比例渲染centerBox: false, // 截圖框是否被限制在圖片里面infoTrue: true, // true 為展示真實輸出圖片寬高 false 展示看到的截圖框寬高canMove:true, }, picsList: [], //頁面顯示的數組 // 防止重復提交 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(’上傳頭像圖片大小不能超過 2MB!’); } return isJPG && isLt2M; }, finish() { this.$refs.cropper.getCropBlob((data) => {var fileName = ’goods’ + this.fileinfo.uidthis.loading = true//上傳阿里云服務器//請求 }) } }}</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>

關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。