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.
63 lines
2.0 KiB
63 lines
2.0 KiB
4 years ago
|
<template>
|
||
|
|
<div class="upload-example">
|
||
|
|
<img class="upload-example-cropper" width="220px" height="220px" :src="media"/>
|
||
|
|
<div class="button-wrapper">
|
||
|
|
<v-btn
|
||
|
|
large
|
||
|
|
:color="$_color('product_option')"
|
||
|
|
@click.native="$refs['image_'+uniqueId][0].click()"
|
||
|
|
light
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
:ref="'image_'+uniqueId"
|
||
|
|
:name="'image_' + uniqueId"
|
||
|
|
v-show="false"
|
||
|
|
@change="uploadImage($event, val)"
|
||
|
|
accept="image/*"
|
||
|
|
/>
|
||
|
|
<v-icon dark>WMi-upload</v-icon>
|
||
|
|
آپلود عکس
|
||
|
|
</v-btn>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
batch_id: {default: '', type: String},
|
||
|
|
media: {default: '', type: String},
|
||
|
|
},
|
||
|
|
data: () => ({
|
||
|
|
uniqueId: Math.floor(Math.random() * 10000),
|
||
|
|
}),
|
||
|
|
methods: {
|
||
|
|
uploadImage(event, value) {
|
||
|
|
// Reference to the DOM input element
|
||
|
|
var input = event.target;
|
||
|
|
// Ensure that you have a file before attempting to read it
|
||
|
|
if (input.files && input.files[0]) {
|
||
|
|
this.$axios.post(this.$_url('file'), {file: input.files[0]}, {
|
||
|
|
before: (xhr) => {
|
||
|
|
this.$emit('before', true);
|
||
|
|
//maybe do something else here
|
||
|
|
},
|
||
|
|
}).then((response) => {
|
||
|
|
this.media = response.data.media;
|
||
|
|
this.$emit('uploaded', response.data)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
/*.upload-example-cropper {*/
|
||
|
|
/* margin: 0 auto;*/
|
||
|
|
/* border: solid 1px #d2d2d2;*/
|
||
|
|
/* height: 220px;*/
|
||
|
|
/* width: 220px;*/
|
||
|
|
/* border-radius: 5px;*/
|
||
|
|
/*}*/
|
||
|
|
</style>
|