You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.3 KiB
102 lines
3.3 KiB
<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>
|