【Go/js】base64エンコードした画像をjson形式で受け取る！

投稿日：2020年7月29日更新日：2021年8月6日

クライアントからのアクションに対し、

サーバはbase64エンコードした画像を、

そのファイル名とともに

jsonフォーマットでクライアントに返信する、

ということをやっていきます。

まず以下３つのファイルを

同一ディレクトリに置いておきます。

画像は何でもokです。

file_json.go
root.html
sample.jpg

それでは中身を見ていきましょう！

package main

import (
	"bufio"
	"encoding/base64"
	"encoding/json"
	"fmt"
	"io/ioutil"
	"log"
	"net/http"
	"os"
)

const name = "sample.jpg" //送信するファイル名

//構造体メンバの名前が小文字だとjson形式に上手く変換出来なかった
type Data struct {
	Fname string `json:"name"`
	Fdata string `json:"file"`
}

func jsonHandler(w http.ResponseWriter, r *http.Request) {
	file, err := os.Open(name)
	if err != nil {
		log.Println("[-]Couldn't opne file: ", name)
	}
	defer file.Close()

	/*ファイルをBase64エンコード*/
	binary, _ := ioutil.ReadAll(file)
	base64Data := base64.StdEncoding.EncodeToString(binary)

	/* Data構造体に入れてJSONエンコード*/
	data := &Data{
		Fname: name,
		Fdata: base64Data,
	}

	jData, err := json.Marshal(data)
	if err != nil {
		log.Println("[-]Failed json encoding: ", err)
	}
	fmt.Println(string(jData))

	/* 送信 */
	w.Header().Set("Content-Type", "application/json")
	w.Write(jData)
	/*もしくは*/
	//json.NewEncoder(w).Encode(data)

	fmt.Println("[+]Sent data")
}

func main() {
	http.HandleFunc("/json", jsonHandler)
	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
		http.ServeFile(w, r, "root.html")
	})
	http.ListenAndServe("localhost:8080", nil)
}

package main

import (

"bufio"

"encoding/base64"

"encoding/json"

"fmt"

"io/ioutil"

"log"

"net/http"

"os"

)

const name = "sample.jpg" //送信するファイル名

//構造体メンバの名前が小文字だとjson形式に上手く変換出来なかった

type Data struct {

Fname string `json:"name"`

Fdata string `json:"file"`

}

func jsonHandler(w http.ResponseWriter, r *http.Request) {

file, err := os.Open(name)

if err != nil {

log.Println("[-]Couldn't opne file: ", name)

}

defer file.Close()

/*ファイルをBase64エンコード*/

binary, _ := ioutil.ReadAll(file)

base64Data := base64.StdEncoding.EncodeToString(binary)

/* Data構造体に入れてJSONエンコード*/

data := &Data{

Fname: name,

Fdata: base64Data,

}

jData, err := json.Marshal(data)

if err != nil {

log.Println("[-]Failed json encoding: ", err)

}

fmt.Println(string(jData))

/* 送信 */

w.Header().Set("Content-Type", "application/json")

w.Write(jData)

/*もしくは*/

//json.NewEncoder(w).Encode(data)

fmt.Println("[+]Sent data")

}

func main() {

http.HandleFunc("/json", jsonHandler)

http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {

http.ServeFile(w, r, "root.html")

})

http.ListenAndServe("localhost:8080", nil)

}

ファイル(画像)をos.Openで読み取ります。

次に、base64エンコードするために、

os.File型をバイナリ（rawデータ）に変換します。

そしたらbase64でエンコードします。

あとはファイル名と一緒に、

json形式でフォーマットするだけです。

送信する際はContent-Typeに

application/jsonを指定して、

ｗ.Writeでクライアントへ送信します。

続いてroot.htmlです。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>サンプル</title>
  </head>
  <body>
    <input type="button" id="btn" value="json形式でファイルを受け取る">
    <script>
      var btn = document.getElementById('btn');
      btn.addEventListener('click', () => {
        fetch('/json')
        .then(response => response.json())
        .then(result => {
          console.log(result);
          //console.log(result.name);
          //console.log(result.file);
        })
      });
    </script>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

var btn = document.getElementById('btn');

btn.addEventListener('click', () => {

fetch('/json')

.then(response => response.json())

.then(result => {

console.log(result);

//console.log(result.name);

//console.log(result.file);

})

});

</script>

</body>

</html>

ボタンが押されたら、

サーバにフェッチします。

その返信をconsole.log()で表示しています。

ちなみに、コメントアウトしてありますが、

「オブジェクト名.キー」とすることで、

欲しい値だけを抽出できます。

実行結果は以下のようになります。

サーバ(go)を起動させて、

localhost:8080に接続します。

ボタンをクリックすると、

以下の結果がコンソールに表示されます。

json形式で受け取れました！

以上です。

最後まで読んでいただきありがとうございました。