引言

第一次参加鐵人賽
回首已走過的路程

不禁感到充滿驚喜和期待
感謝各位前輩和夥伴的支持和鼓勵
這個系列文一定會充滿精彩

也歡迎各位指教
期待在這段旅程中共同成長！@_______@!!

來一點Firebase

先來到firebase.ts
這隻檔案裡

import語句用於從Firebase Storage模組中匯入所需的函數和物件
且把上一篇中寫好的upload 方法包裝起來

getStorage()建立了一個Firebase Storage 實例
用於取得儲存資料

主要目的是上傳一個書籍封面圖像檔案到Firebase Storage 中的指定位置
然後獲取該圖像的下載鏈接

import {
  getStorage,
  ref as storageRef,
  uploadBytesResumable,
  getDownloadURL,
} from "firebase/storage";

export const uploadBookCover = async (file:File)=>{
  const storage = getStorage();
  const imageRef = storageRef(storage, `images/${file.name}`);
  try {
    await uploadBytesResumable(imageRef, file);
    return await getDownloadURL(imageRef);
  } catch (error) {
    return null;
  }
}

來切一點版

再度回到我們最親愛又最熟悉的表單BookForm.vue

  <form @submit.prevent="handleSubmit">
          <div mb-2>
            <img w-full v-if="imageUrl" :src="imageUrl" alt="Uploaded Image" />
            <!-- <input type="file" @change="uploadImage" accept="image/*" /> -->
          </div>
          <div class="mb-2 text-center">
            <label class="i-line-md:upload-loop text-4 text-left" for="fileInput">upload</label>
            
            <input
              type="file"
              id="fileInput"
              ref="fileInput"
              hidden
              @change="uploadImage"
              accept="image/*"
            />
          </div>
         //...........otherCode
  
        </form>

我們把上傳的按鈕設計成一個小Icon
因為書封面圖大概只會上傳一兩次而已
不是頻繁操作

來一點TypeScript

加入剛剛包好的方法uploadBookCover

import {
  createBookInfo,
  getBookInfo,
  updateBookInfo,
  uploadBookCover,
} from "../../src/firebase";

const imageUrl = ref<string>("");

const uploadImage = async (event: Event) => {
  const fileList = event.target as HTMLInputElement;
  if (fileList.files === null) return;

  const file = fileList.files[0];
  if (file.size === 0) return;
  const urlResult = await uploadBookCover(file);
  if (!!urlResult) {
    imageUrl.value = urlResult;
    bookInfo.value.coverImagePath = urlResult;
  }
  console.log(urlResult);
  return;
};

這個元素是一個文件上傳輸入框 input type="file"
以便後續可以讀取選擇的文件

event.target as HTMLInputElement
這一行將事件的目標元素轉換為 HTMLInputElement 類型

if (fileList.files === null) return;
檢查如果沒有選擇文件（即 fileList.files 為 null）
則直接返回，不執行後續操作

fileList.files[0];
這行程式碼從檔案列表中取得第一個文件（如果有多個文件）
並將其儲存在 file 變數中。

if (file.size === 0) return;
檢查所選擇的文件的大小
如果文件大小為零（即空文件）
則返回，不執行後續操作

那今天就介紹到這裡啦！
希望你能從本系列文中獲得有用知識

謝謝大家
祝我們程式碼都可以寫得愉快🚀😊