vue+element實現圖片上傳及裁剪功能
阿新 • • 發佈:2020-06-30
本文例項為大家分享了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 class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" > <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload> </div> <el-dialog title="圖片剪裁" :visible.sync="dialogVisible" append-to-body> <div class="cropper-content"> <div class="cropper" 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.uid this.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元件學習教程進行學習。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。