vue-cropper插件實現(xiàn)圖片截取上傳組件封裝
基于vue-cropper插件實現(xiàn)圖片截取上傳組件封裝的具體代碼,供大家參考,具體內(nèi)容如下
需求場景:
后臺開發(fā)需要上傳圖片并進(jìn)行相應(yīng)比例尺寸圖片的截取,本組件開發(fā)采用Ant Design Vue組件庫搭配vue-cropper插件進(jìn)行封裝
實現(xiàn)如下
html
<template> <div> <a-upload name="avatar" list-type="picture-card" class="avatar-uploader" :show-upload-list="false" :custom-request="customRequest" :before-upload="beforeUpload" :style="`width: ${width}; height: ${height};`" > <img v-if="imageUrl && !loading" :src="imageUrl" alt="avatar" :style="`width: ${width}; height: ${height};`" /> <div v-else> <a-icon :type="loading ? 'loading' : 'plus'" /> <div class="ant-upload-text">上傳圖片</div> </div> </a-upload> <a-modal v-model="imageCut.isShowModal" title="圖片截取" width="400px" @ok="finish" @cancel="imageCut.close" > <div class="cropper-content" v-if="imageCut.isShowModal"> <div class="cropper" style="text-align:center"> <vueCropper ref="cropper" :img="imageCut.imgFile" :outputSize="outputSize" :outputType="outputType" :info="info" :full="full" :canMove="canMove" :canMoveBox="canMoveBox" :original="original" :autoCrop="autoCrop" :fixed="fixed" :fixedNumber="fixedNumber" :centerBox="centerBox" :infoTrue="infoTrue" :fixedBox="fixedBox" ></vueCropper> </div> </div> </a-modal> </div> </template>
js
<script> import { uploadImage } from '@/api/common' import { VueCropper } from "vue-cropper"; export default { name: 'ImageUpload', components: { VueCropper }, data() { return { loading: false, imageCut: { isShowModal: false, imgFile: '', init: imgFile => { this.imageCut.imgFile = imgFile this.imageCut.isShowModal = true }, close: () => { this.imageCut.imgFile = '' this.imageCut.isShowModal = false } } } }, props: { imageUrl: String, width: { type: String, default: '100px' }, height: { type: String, default: '100px' }, canCut: { type: Boolean, default: false }, info: { type: Boolean, default: false }, // 裁剪框的大小信息 outputSize: { type: Number, default: 0.8 }, // 裁剪生成圖片的質(zhì)量 outputType: { type: String, default: 'jpeg' }, // 裁剪生成圖片的格式 canScale: { type: Boolean, default: true }, // 圖片是否允許滾輪縮放 autoCrop: { type: Boolean, default: true }, // 是否默認(rèn)生成截圖框 // autoCropWidth: 300, // 默認(rèn)生成截圖框?qū)挾? // autoCropHeight: 200, // 默認(rèn)生成截圖框高度 fixedBox: { type: Boolean, default: false }, // 固定截圖框大小 不允許改變 fixed: { type: Boolean, default: true }, // 是否開啟截圖框?qū)捀吖潭ū壤? fixedNumber: { type: Array, default: () => [1, 1] }, // 截圖框的寬高比例 full: { type: Boolean, default: true }, // 是否輸出原圖比例的截圖 canMove: { type: Boolean, default: false }, canMoveBox: { type: Boolean, default: true }, // 截圖框能否拖動 original: { type: Boolean, default: false }, // 上傳圖片按照原始比例渲染 centerBox: { type: Boolean, default: true }, // 截圖框是否被限制在圖片里面 infoTrue: { type: Boolean, default: true } // true 為展示真實輸出圖片寬高 false 展示看到的截圖框?qū)捀? }, methods: { beforeUpload(file) { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' if (!isJpgOrPng) { this.$message.error('請上傳JPG或PNG文件!') } const isLt2M = file.size / 1024 / 1024 < 2 if (!isLt2M) { this.$message.error('請上傳2MB以下文件!') } return isJpgOrPng && isLt2M }, customRequest(file) { if (this.canCut) { this.readFile(file.file) } else { this.loading = true const formData = new FormData() formData.append('fileIdcard', file.file) uploadImage(formData).then(res => { this.loading = false this.$emit('uploadSuccess', res.ossUrl) }) } }, readFile(file) { var reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { this.imageCut.init(reader.result) } }, finish() { this.$refs.cropper.getCropBlob(data => { this.loading = true // 上傳阿里云服務(wù)器 const formData = new FormData() formData.append('fileIdcard', data) uploadImage(formData).then(res => { this.imageCut.close() this.loading = false this.$emit('uploadSuccess', res.ossUrl) }) }) } } } </script>
css
<style lang="less"> .avatar-uploader > .ant-upload { width: 100%; height: 100%; } .ant-upload-select-picture-card i { font-size: 32px; color: #999; } .ant-upload-select-picture-card .ant-upload-text { margin-top: 8px; color: #666; } .cropper-content { .cropper { width: auto; height: 400px; } } </style>
組件使用及說明
<image-upload :imageUrl="form.diagramUrl" @uploadSuccess="uploadSuccess" width="160px" height="90px" :can-edit="canCut" :fixed-number="[16,9]" />
組件調(diào)用時需傳入canEdit屬性,指定組件是否啟動圖片選取后的裁剪功能,默認(rèn)值為不啟用裁剪;需裁剪時可傳入fixedNumber屬性,定義裁剪框的寬高比
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解
下面小編就為大家分享一篇vue實現(xiàn)微信分享朋友圈,發(fā)送朋友的示例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02vue +elementui 導(dǎo)入CSV文件的方式
封裝一個公共js方法,使用papaparse解析CSV文件且返回數(shù)組格式,下面通過示例代碼介紹vue +elementui 導(dǎo)入CSV文件的方式,感興趣的朋友一起看看吧2024-04-04vue.js使用v-model指令實現(xiàn)的數(shù)據(jù)雙向綁定功能示例
這篇文章主要介紹了vue.js使用v-model指令實現(xiàn)的數(shù)據(jù)雙向綁定功能,簡單分析了v-model指令的功能并結(jié)合實例形式給出了v-model指令實現(xiàn)數(shù)據(jù)雙向綁定相關(guān)操作技巧,需要的朋友可以參考下2018-05-05vue+elementui實現(xiàn)動態(tài)控制表格列的顯示和隱藏
這篇文章主要介紹了vue+elementui實現(xiàn)動態(tài)控制表格列的顯示和隱藏,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作
debounce是lodash工具庫中的一個非常好用的函數(shù)。這篇文章主要介紹了Vue.js頁面中有多個input搜索框如何實現(xiàn)防抖操作,需要的朋友可以參考下2019-11-11