Cloud Storageに画像をアップロードする処理の書き方を解説

今回はFirebaseのCloud Storageに画像をアップロードする処理の書き方を解説します。

フロント側の処理で「ボタンを押したら画像をCloud Storageにアップロード」みたいなイメージです。

Cloud Storageに画像をアップロードする方法
Cloud Storageに画像をアップロードできない場合
まとめ

Cloud Storageに画像をアップロードする方法

以下のように書けばokです。画像をアップロードすると同時にCloud Storageへもアップします。

Vue3で書いていますがReactでも同じように書けるはずです。

<script setup>
import { getStorage, ref as storageRef, uploadBytes } from 'firebase/storage';

const uploadImage = (e) => {
  const storage = getStorage();
  const file = e.target.files[0]; // ファイル本体
  const storageNewRef = storageRef(storage, `images/${file.name}`); // Cloud Storageのパスへの参照

  // Cloud Storageに画像アップロード
  uploadBytes(storageNewRef, file).then((snapshot) => {
    console.log('アップロード完了！');
  });
};
</script>

<template>
  <div>
    <input type="file" @change="uploadImage">
  </div>
</template>

Cloud Storageに画像をアップロードする関数はuploadBytes()です。これさえ知っていれば大丈夫。

解説をすると、<input type="file">でアップロードした画像はchangeイベント中のe.target.files[0]で取得できます。これがファイルの本体（Blobというやつ）ですね。

次はCloud Storageのアップロード先のパスを指定します。refで参照を取得できるのでref(storage, 'パス')とすればそのパスまでの参照を取得できます。今回ならCloud Storage内の「images/」というディレクトリにそのままのファイル名で画像が入ることになりますね。

最後にuploadBytes(Cloud Storageへの参照, ファイル)とすればアップロード完了です。そのまま.then()でアップロード完了後の処理を書くこともできます。

Vue3の場合、Vue3のrefとfirebase/storageからimportしたrefの名前が被っているのでそのまま使うとエラーになります。

なのでref as storageRefとimportしていますが、Vue2やReactの人はrefという名前のままimportして大丈夫です。

ユニークなidをディレクトリ名にしたい場合はuuidを使うといい感じです。npmかyarnお好きな方でどうぞ。

$ npm i uuid
$ yarn add uuid

<script setup>
import { getStorage, ref as storageRef, uploadBytes } from 'firebase/storage';
import { v4 } from 'uuid';

const uploadImage = (e) => {
  const storage = getStorage();
  const file = e.target.files[0]; // ファイル本体
  const id = v4(); // 追加
  const storageNewRef = storageRef(storage, `images/${id}/${file.name}`); // ユニークなidのパス

  // Cloud Storageに画像アップロード
  uploadBytes(storageNewRef, file).then((snapshot) => {
    console.log('アップロード完了！');
  });
};
</script>

ちなみにブログ記事のサムネイルなどをアップロードする際は画像をそのまま表示する機能なども必要になることがありますね。このやり方は過去記事で解説しているのでよかったら参考にしてみてください。

＞＞JavaScriptでinput type=”file”で画像をアップした際にプレビューを表示する方法

公式ドキュメントにも解説が載っているので気になる人はこちらからどうぞ。

＞＞ウェブで Cloud Storage を使用してファイルをアップロードする

Cloud Storageに画像をアップロードできない場合

FirebaseError: Firebase Storage: User does not have permission to access 'パス'. (storage/unauthorized)というエラーで画像がアップロードできていない場合、Cloud Storageにアクセス権がないのが原因です。

FirebaseのコンソールからCloud Storageのルールを変更してアクセスできるようにする必要があります。こちらのやり方は各自でググってくださいm(__)m