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