This article shares the specific code for vue+element to upload and crop images for your reference. The specific content is as follows
Any small demo written casually has no problems with any function. There may be some small details that are not optimized.
1. Install vue-cropper
npm install vue-cropper
2. Use within the component
import { VueCropper } from 'vue-cropper'
components: {
VueCropper,
},
It can be seen in detailOfficial website
demo
<template>
<div>
<h1>Image upload</h1>
<div>
<el-upload
class="avatar-uploader"
action="/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="Picture Clipping" :="dialogVisible" append-to-body>
<div class="cropper-content">
<div class="cropper" style="text-align:center">
<vueCropper
ref="cropper"
:img=""
:outputSize=""
:outputType=""
:info=""
:canScale=""
:autoCrop=""
:autoCropWidth=""
:autoCropHeight=""
:fixed=""
:fixedBox=""
:fixedNumber=""
></vueCropper>
</div>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">Pick remove</el-button>
<el-button type="primary" @click="finish" :loading="loading">confirm</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {VueCropper} from 'vue-cropper'
export default {
components: {
VueCropper
},
data(){
return{
imageUrl: '',
dialogVisible: false,
// Basic configuration option for cropping components option: {
img: '', // The address of the cropped image info: true, // Crop frame size information outputSize: 0.8, // Crop the quality of the generated image outputType: 'jpeg', // Crop the format to generate the picture canScale: false, // Whether the picture allows scroll wheel to zoom autoCrop: true, // Whether to generate screenshot boxes by default autoCropWidth: 100, // The default generated screenshot frame width autoCropHeight: 100, // The default generated screenshot frame height fixedBox: true, // Fixed screenshot frame size not allowed to change fixed: true, // Whether to turn on the screenshot frame width and height fixed ratio fixedNumber: [1, 1], // The aspect ratio of the screenshot frame full: true, // Whether to output screenshots of the original image scale canMoveBox: false, // Can the screenshot box be dragged original: false, // Upload the image to render according to the original proportion centerBox: false, // Is the screenshot frame limited to the picture infoTrue: true, // true to show the real output image width and height false to show the screenshot width and height of the seen screenshot canMove:true,
},
picsList: [], //Array of page display // Prevent repeated submissions loading: false,
fileinfo:{}
}
},
methods: {
handleAvatarSuccess(res, file,fileList) {
//After uploading is successful, assign the image address to the crop box to display the picture this.$nextTick(() => {
= ();
= res
= true
})
},
beforeAvatarUpload(file) {
const isJPG = === 'image/jpeg'||==='image/png';
const isLt2M = / 1024 / 1024 < 2;
if (!isJPG) {
this.$('Uploading avatar images can only be in JPG format!');
}
if (!isLt2M) {
this.$('The uploaded avatar image size cannot exceed 2MB!');
}
return isJPG && isLt2M;
},
finish() {
this.$((data) => {
var fileName = 'goods' +
= true
//Upload Alibaba Cloud Server //ask })
}
}
}
</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>
Regarding the tutorial on components, please click on the topicComponent learning tutorialCarry out learning.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.