70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<template>
|
|
<div>
|
|
|
|
<div style="text-align: center">
|
|
<img :src="imgDataUrl"><br>
|
|
<v-btn
|
|
depressed
|
|
@click="toggleShow"
|
|
>Upload new Image</v-btn>
|
|
</div>
|
|
<my-upload field="img"
|
|
@crop-success="cropSuccess"
|
|
|
|
v-model="show"
|
|
:width="300"
|
|
:height="300"
|
|
:url="uploadUrl"
|
|
:params="params"
|
|
:headers="headers"
|
|
lang-type="en"
|
|
img-format="png"></my-upload>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
//import 'babel-polyfill'; // es6 shim
|
|
import myUpload from 'vue-image-crop-upload';
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
show: false,
|
|
uploadUrl: process.env.VUE_APP_API_URL+"api/v1/app/"+this.appId+"/changeImage",
|
|
params: {
|
|
token: '123456798',
|
|
name: 'avatar'
|
|
},
|
|
headers: {
|
|
Authorization: 'ERROR'
|
|
},
|
|
imgDataUrl: '' // the datebase64 url of created image
|
|
}
|
|
},
|
|
props: [
|
|
'appId',
|
|
],
|
|
components: {
|
|
'my-upload': myUpload
|
|
},
|
|
mounted: function() {
|
|
let token = localStorage.getItem("access_token");
|
|
this.headers["Authorization"] = "Bearer "+token
|
|
},
|
|
methods: {
|
|
toggleShow() {
|
|
this.show = !this.show;
|
|
},
|
|
/**
|
|
* crop success
|
|
*
|
|
* [param] imgDataUrl
|
|
* [param] field
|
|
*/
|
|
cropSuccess(imgDataUrl, field){
|
|
this.imgDataUrl = imgDataUrl;
|
|
},
|
|
}
|
|
}
|
|
</script>
|