vue-cropper 플러그 인 은 이미지 캡 처 업로드 구성 요소 패 키 징 을 실현 합 니 다.
필요 필드:
배경 개발 은 그림 을 업로드 하고 해당 비례 사이즈 의 그림 을 캡 처 해 야 합 니 다.이 구성 요소 개발 은 Ant Design Vue 구성 요소 라 이브 러 리 와 vue-cropper 플러그 인 을 조합 하여 패키지 합 니 다.
실현
![](https://s1.md5.ltd/image/c17654301fe7ee1ae9f54a7fa7bea9ba.jpg)
![](https://s1.md5.ltd/image/482e8bcca5b0d458024310b37ad3b2ed.jpg)
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
}, //
outputType: {
type: String,
default: 'jpeg'
}, //
canScale: {
type: Boolean,
default: true
}, //
autoCrop: {
type: Boolean,
default: true
}, //
// autoCropWidth: 300, //
// autoCropHeight: 200, //
fixedBox: {
type: Boolean,
default: false
}, //
fixed: {
type: Boolean,
default: true
}, //
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
},
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
//
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]"
/>
구성 요소 호출 시 canEdit 속성 을 입력 해 야 합 니 다.구성 요소 가 그림 선택 후의 재단 기능 을 시작 할 지 여 부 를 지정 합 니 다.기본 값 은 재단 을 사용 하지 않 습 니 다.재단 이 필요 할 때 fixed Number 속성 을 입력 하여 재단 상자 의 너비 와 높이 를 정의 합 니 다.이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.