parent
830465297f
commit
86c5f0ae56
@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="upload-example width-full">
|
||||
<cropper classname="upload-example-cropper" :stencil-props="stencilProps" @change="onChangeCropper" :src="image" />
|
||||
<div class="button-wrapper">
|
||||
<v-btn
|
||||
@click.native="$refs['image_'+uniqueId].click()"
|
||||
large
|
||||
:color="color"
|
||||
dark
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
:ref="'image_'+uniqueId"
|
||||
:name="'image_' + uniqueId"
|
||||
v-show="false"
|
||||
@change="uploadImage($event)"
|
||||
accept="image/*"
|
||||
/>
|
||||
<v-icon dark>{{icon}}</v-icon>{{name}}
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Cropper } from "vue-advanced-cropper";
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
default: 'آپلود عکس'
|
||||
},
|
||||
icon: {
|
||||
default: 'WMi-upload'
|
||||
},
|
||||
color: {
|
||||
default: 'black'
|
||||
},
|
||||
stencilProps: {
|
||||
default: () => ({aspectRatio: 1, checkImageOrigin: false})
|
||||
},
|
||||
crop_data: {
|
||||
default: () => ([])
|
||||
},
|
||||
value: {
|
||||
default: ''
|
||||
},
|
||||
url: {
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Cropper
|
||||
},
|
||||
data: () => ({
|
||||
uniqueId: Math.floor(Math.random() * 10000),
|
||||
}),
|
||||
computed: {
|
||||
image: {
|
||||
get() {
|
||||
return this.url;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('update:url', value);
|
||||
}
|
||||
},
|
||||
file: {
|
||||
get() {
|
||||
return this.value;
|
||||
},
|
||||
set(value) {
|
||||
this.$emit('input', value);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadImage(event) {
|
||||
// Reference to the DOM input element
|
||||
let input = event.target;
|
||||
// Ensure that you have a file before attempting to read it
|
||||
if (input.files && input.files[0])
|
||||
{
|
||||
//set v-model
|
||||
this.file = input.files[0];
|
||||
|
||||
// create a new FileReader to read this image and convert to base64 format
|
||||
let reader = new FileReader();
|
||||
// Define a callback function to run, when FileReader finishes its job
|
||||
reader.onload = e => {
|
||||
// Note: arrow function used here, so that "this.imageData" refers to the imageData of Vue component
|
||||
// Read image as base64 and set to imageData
|
||||
this.image = e.target.result;
|
||||
};
|
||||
// Start the reader job - read file as a data url (base64 format)
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
}
|
||||
},
|
||||
onChangeCropper({coordinates}) {
|
||||
this.$emit('update:crop_data', coordinates);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
Loading…
Reference in new issue