タイトルのまんまです。個人開発中のWebアプリのため全体のコードを載せることができません。ご了承ください。
ポイントとなる部分をポイントポイントで紹介できればと思います。
react-dropzoneを利用して画像ファイルからbase64を取得し、axiosで送信する
react-dropzoneの利用方法は以下になります
https://react-dropzone.js.org/#section-basic-example
const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
const files = acceptedFiles.map(file => (
<li key={file.path}>
{file.path} - {file.size} bytes
</li>
));react-dropzoneの利用方法を抜粋したのが上のコードです。
acceptedFilesに選択した画像ファイルの情報が入ってきます。
const fileReader = new FileReader();
// ファイルをBase64でエンコード
fileReader.onload = () => {
const base64Data = fileReader.result as string;
// 事前登録APIへリクエストをポスト
axios
.post(registerURL, base64Data)
.then((response) => {
console.log(response.data);
});
};
fileReader.readAsDataURL(acceptedFiles[0]);ファイル読み込み時のonloadイベントを利用してbase64形式でデータを取得。
axiosを利用してGoで作成されたAPIへPOSTメソッドで送信します。
acceptedFiles[0]としているのは、現在のアプリの想定では画像は1つのみ選択する仕様のため、選択されたファイルの先頭を取得しています。
Goでのバックエンド処理
Goでは送信されたPOSTデータを解析し、画像ファイルとして保存します。
imageData := strings.Split(base64Data, ",")[1]
decodedData, err := base64.StdEncoding.DecodeString(imageData)strings.Split(base64Data, “,”)[1]としているのは、送信されたbase64データの先頭には「data:image/png;base64,」といったデータの種類を表すスキームが含まれているため、純粋なデータ部分のみを取得するためを取得するための処理になります。
err = os.WriteFile(path+fileName, decodedData, 0644)実際にbase64(デコード済み)のデータを画像ファイルに書き出している部分はこちら。
path + fileNameは保存先のファイル名まで含めたフルパスが記載されています。
decodedDataはデコード済みのbase64データ、0644はファイルパーミッションとなります。
主要な部分の抜粋になりますが、「画像をbase64形式で受け取り、Goを利用してファイルを保存する」という流れについては概ね以上のようになります。
ちなみに、当初はreact-dropzoneではなく、MuiFileInput(Material UI File Input)を利用していたのですが、子コンポーネントとして作成したMuiFileInputに対して渡したイベントハンドラがどうやってもうまく起動せず断念しました。
react-dropzoneは「多機能すぎて気軽に使えない」ような書き込みを見たのですが、base64形式でファイルを送信する程度であれば、そこまで難しい機能を利用せず実現できます。
