VueでUIを作ってて、axios使用でajaxで画像ファイルを取得した後に、
そのデータを表示したり、ローカルに保存したりしたい。
その場合のやり方。
//リクエストヘッダでコレつけた方がいいっぽ
const config = {
responseType: 'arraybuffer'
}
//サーバに送信
this.$axios
.post('http://hogehoeg/sample.png', { data: 'somedata'}, config)
.then(response => {
//base64でエンコードしたい場合
let bstr = new Buffer(response.data, 'binary').toString('base64')
//blobオブジェクトにしたい場合
let blob = new Blob([response.data], { type: 'image/png' })
//imgタグをidでとって、srcにblobのObjectURLを突っ込んで画像表示する
let img = document.getElementById('img_tag_id')
let url = window.URL || window.webkitURL
img.src = url.createObjectURL(blob)
//保存させたい場合（ダウンロードっぽくさせたい場合）
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = 'download-filename.png'
link.click()
//Vueで別のコンポーネントにデータ渡したい場合はこんな感じ？
this.imgdata = response.data
})
base64でやる場合は、画像サイズは32kb未満くらいで考えた方が良いのかしら。まーあんま大きい画像はやめた方がよさそうですね。
ajaxで取ってきた画像ファイルとかをダウンロードっぽく保存させたい場合は前述の感じでやるっぽ。リンク作って、ﾛｰｶﾙのオブジェクトのURLを突っ込んで中で、Clickを発火させてる感じ？
ちょっとイレギュラーなやらせ方のような気もするんだけど、StackOverFlowとかいろいろ見てるとこのやり方しかないっぽいですかね？
で、いい感じにまとめてくれるのが↓のGitHubのリポジトリ
https://github.com/kennethjiang/js-file-download/blob/master/file-download.js
IE11だと上述のやり方じゃ上手くいかないらしく、それにも↑のリポジトリは対応してる。
これ使った方がいいと思う。車輪の再発明は控えたい。
あと、vueでaxios使う場合、下の感じで書くと、中でthisが使えない。
this.$axios
.post('http://hogehoeg/sample.png', { data: 'somedata'}, config)
.then(function(response){
this.dataval = ''//これ無理
})
で、これをやるには呼ぶ前に「let self = this」みたいにしておくのが昔見たやり方なんだけど、
最近の書き方的にはアロー関数でやるとthisもいける。
this.$axios
.post('http://hogehoeg/sample.png', { data: 'somedata'}, config)
.then(response => {
this.dataval = ''//これいける
})
