vue 모 바 일 이미지 재단 업로드 기능 구현
1.cropperjs 의존 라 이브 러 리 설치
npm install cropperjs
2.컴 포 넌 트 SimpleCropper.vue 작성
<template>
<div class="v-simple-cropper">
<slot>
<button @click="upload"> </button>
</slot>
<input class="file" ref="file" type="file" accept="image/*" @change="uploadChange">
<div class="v-cropper-layer" ref="layer">
<div class="layer-header">
<button class="cancel" @click="cancelHandle"> </button>
<button class="confirm" @click="confirmHandle"> </button>
</div>
<img ref="cropperImg">
</div>
</div>
</template>
<script>
import Cropper from 'cropperjs'
import 'cropperjs/dist/cropper.min.css'
export default {
name: 'v-simple-cropper',
props: {
initParam: Object,
successCallback: {
type: Function,
default: () => {}
}
},
data () {
return {
cropper: {},
filename: ''
}
},
mounted () {
this.init()
},
methods: {
//
init () {
let cropperImg = this.$refs['cropperImg']
this.cropper = new Cropper(cropperImg, {
aspectRatio: 1 / 1,
dragMode: 'move'
})
},
//
upload () {
this.$refs['file'].click()
},
//
uploadChange (e) {
let file = e.target.files[0]
this.filename = file['name']
let URL = window.URL || window.webkitURL
this.$refs['layer'].style.display = 'block'
this.cropper.replace(URL.createObjectURL(file))
},
//
cancelHandle () {
this.cropper.reset()
this.$refs['layer'].style.display = 'none'
this.$refs['file'].value = ''
},
//
confirmHandle () {
let cropBox = this.cropper.getCropBoxData()
let scale = this.initParam['scale'] || 1
let cropCanvas = this.cropper.getCroppedCanvas({
width: cropBox.width * scale,
height: cropBox.height * scale
})
let imgData = cropCanvas.toDataURL('image/jpeg')
let formData = new window.FormData()
formData.append('fileType', this.initParam['fileType'])
formData.append('img', imgData)
formData.append('signId', this.$localStorage('signId'))
formData.append('originalFilename', this.filename)
window.$axios(this.initParam['uploadURL'], formData, {
method: 'post',
headers: {'Content-Type': 'multipart/form-data'}
}).then(res => {
this.successCallback(res.data)
this.cancelHandle()
})
}
}
}
</script>
<style lang="less">
.v-simple-cropper {
.file {
display: none;
}
.v-cropper-layer {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #fff;
z-index: 99999;
display: none;
.layer-header {
position: absolute;
top: 0;
left: 0;
z-index: 99999;
background: #fff;
width: 100%;
height: .8rem;
padding: 0 .2rem;
box-sizing: border-box;
}
.cancel,
.confirm {
line-height: .8rem;
font-size: .28rem;
background: inherit;
border: 0;
outline: 0;
float: left;
}
.confirm {
float: right;
}
img {
position: inherit!important;
border-radius: inherit!important;
float: inherit!important;
}
}
}
</style>
3.구성 요소 참조
<template>
<simple-cropper :initParam="uploadParam" :successCallback="uploadHandle" ref="cropper">
<img :src="userImg" @click="upload">
</simple-cropper>
</template>
<script>
import SimpleCropper from '@/components/SimpleCropper'
export default {
name: 'info',
data () {
return {
uploadParam: {
fileType: 'recruit', //
uploadURL: this.$dataURL + 'uploadAction/qcloudImg', //
scale: 4 // : 4
},
userImg: this.$dataURL + 'test.png'
}
},
methods: {
//
upload () {
this.$refs['cropper'].upload()
},
//
uploadHandle (data) {
if (data.state === 'SUCCESS') {
this.userImg = this.form.headImgUrl = data.fileId
}
}
},
components: {
SimpleCropper
}
}
</script>
4.예시 도vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
더 많은 vue 학습 튜 토리 얼 은 주 제 를 읽 으 세 요《vue 실전 교정》.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.