Created
October 16, 2018 18:01
-
-
Save ergofriend/de0ca395c990bd8c6ec0945f4952a59c to your computer and use it in GitHub Desktop.
GyazoとImgurのapiを使ってストレージを節約 with Vue ref: https://qiita.com/ErgoFriend/items/acb61dda0121acbed531
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
VUE_APP_GYAZO='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' | |
VUE_APP_IMGUR='zzzzzzzzzzzz' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div id="app"> | |
<Uploader class="api" :api="gyazo"/> | |
<Uploader class="api" :api="imgur"/> | |
</div> | |
</template> | |
<script> | |
import Uploader from './components/Uploader.vue'; | |
export default { | |
name: 'app', | |
components: { | |
Uploader | |
}, | |
data() { | |
return { | |
imgur: { | |
service: 'imgur', | |
url: 'https://api.imgur.com/3/image', | |
token: process.env.VUE_APP_IMGUR, | |
logo: 'data:image/jpeg;base64,xxxxxxxxxxxxxxxxxxxxx' | |
}, | |
gyazo: { | |
service: 'gyazo', | |
url: 'https://upload.gyazo.com/api/upload', | |
token: process.env.VUE_APP_GYAZO, | |
logo: 'https://i.imgur.com/ylzMVIk.png' | |
} | |
}; | |
} | |
}; | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
if (this.api.service == 'gyazo') { | |
data.append('imagedata', files[0]); | |
data.append('access_token', apiKey); | |
} else { | |
data.append('image', files[0]); | |
content.headers.Authorization = 'Client-ID ' + apiKey; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// https://api.imgur.com/3/image | |
// https://upload.gyazo.com/api/upload | |
const apiUrl = ''; | |
// https://imgur.com/account/settings/apps | |
// https://gyazo.com/oauth/applications | |
const apiKey = ''; | |
// Common | |
let data = new FormData(); | |
let content = { | |
method: 'POST', | |
headers: { | |
Accept: 'application/json' | |
}, | |
body: data, | |
mimeType: 'multipart/form-data' | |
}; | |
// Gyazo | |
data.append('imagedata', files[0]); | |
data.append('access_token', apiKey); | |
// Imgur | |
data.append('image', files[0]); | |
content.headers.Authorization = 'Client-ID ' + apiKey; // Don't include gyazo api | |
fetch(apiUrl, content) | |
.then( | |
response => response.json() // if the response is a JSON object | |
) | |
.then(success => { | |
console.log(success); | |
console.log(success.url); // Gyazo API | |
console.log(success.data.link); // Imgur API | |
}) | |
.catch( | |
error => console.log(error) // Handle the error response object | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class="api_container"> | |
<div style="height: 160px;"> | |
<img :src="api.logo" style="max-width: 300px;"/> | |
</div> | |
<br> | |
<input v-show="!image_url" type="file" id="image_file" @change="onFileChange" class="imgur" accept="image/*" required/> | |
<button v-show="image_url" type="button" @click="removeImage">取り消す</button> | |
<br> | |
<p>URL: {{ image_url }}</p> | |
<br> | |
<div style="height: 300px;"> | |
<img :src="image_thum" id="image_thum" style="max-width: 300px;"/> | |
</div> | |
</div> | |
</template> | |
<script> | |
export default { | |
props: { | |
api: { | |
type: Object, | |
logo: String, | |
url: String, | |
token: String, | |
service: String | |
} | |
}, | |
data() { | |
return { | |
loading_gif: | |
'https://cdn-images-1.medium.com/max/1600/1*9EBHIOzhE1XfMYoKz1JcsQ.gif', | |
image_thum_sample: | |
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTaE2sVZUD0TFLL7ix68tjo2PG0cgxb_NFR65Thfr_VuC45yGfT', | |
image_thum: | |
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTaE2sVZUD0TFLL7ix68tjo2PG0cgxb_NFR65Thfr_VuC45yGfT', | |
image_url: null | |
}; | |
}, | |
methods: { | |
onFileChange: function(e) { | |
let files = e.target.files || e.dataTransfer.files; | |
if (!files.length) { | |
return; | |
} | |
const apiUrl = this.api.url; | |
const apiKey = this.api.token; | |
this.image_thum = this.loading_gif; | |
this.image_url = ' アップロードしています...'; | |
let data = new FormData(); | |
let content = { | |
method: 'POST', | |
headers: { | |
//Authorization: 'Client-ID ' + apiKey, | |
Accept: 'application/json' | |
}, | |
body: data, | |
mimeType: 'multipart/form-data' | |
}; | |
if (this.api.service == 'gyazo') { | |
console.debug('gyazo'); | |
data.append('imagedata', files[0]); | |
data.append('access_token', apiKey); | |
} else { | |
console.debug('imgur'); | |
data.append('image', files[0]); | |
content.headers.Authorization = 'Client-ID ' + apiKey; | |
} | |
fetch(apiUrl, content) | |
.then( | |
response => response.json() // if the response is a JSON object | |
) | |
.then( | |
success => { | |
console.log(success); | |
if (this.api.service == 'gyazo') { | |
console.log(success.url); | |
this.image_url = success.url; | |
} else { | |
console.log(success.data.link); | |
this.image_url = success.data.link; | |
} | |
this.createImage(files[0]); | |
} // Handle the success response object | |
) | |
.catch( | |
error => console.log(error) // Handle the error response object | |
); | |
}, | |
createImage(file) { | |
let reader = new FileReader(); | |
reader.onload = e => { | |
this.image_thum = e.target.result; | |
}; | |
reader.readAsDataURL(file); | |
}, | |
removeImage() { | |
this.image_url = ''; | |
document.getElementById('image_file').value = ''; | |
this.image_thum = this.image_thum_sample; | |
} | |
} | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment