Sitemap

AlphaCamp 2–3 結業部落格:自學經驗

Jul 9, 2021

AlphaCamp 學期 2–3 是從後端出發的嶄新旅程,雖然陣痛期真的好長,但突破的感覺真的滿爽的。也是從這個時候開始,適應了 Terminal 、 Git 版本控管、讀不完的原文工程文件。這份作業是 2–3 的指標作業《打造餐廳清單》,本文章是紀錄我如何實作上傳圖片這件事情。

餐廳清單畫面。

緣起

每間餐廳資訊都有自己的id、名字、英文名字、種類、圖片、地點、電話、google地圖、星級、簡介。每次在新增的時候,都不能上傳圖片這件事真的讓我覺得非常奇怪,然後想起來我在前端班上課時用過的 Multer 套件,因為我還不太會用,這是一個機會讓我學會它也說不定。

失敗的經驗

載入了 Multer 按造教材的步驟一步一步,卻還是做不出來想要的效果,那種不知道發生什麼事情的感覺,一頭霧水。不行,我一定要找出問題,所以我除了既有的教材、官方文件以外,搜集了其他文章,我會放在後面的參考資料,需要的人可以過去看喔。

定義問題與解決

一開始不熟的時候在 de bug ,就發現我只記得要改路由裡面的程式碼,忘記views裡面的form要加 enctype=”multipart/form-data,input 忘記accept=”image/*,修正完之後,第二個遇到的問題是路徑的格式,前面到底需要斜線還是不需要斜線,第三個是修改餐廳資訊的時候,路徑會變得不對。為了解決路徑問題,還特地寫一個 function 來處理路徑,後來才發現改了設定之後就解決了。根本不用寫function,繞了一大圈。

找到關鍵

後來我又看到了麥克寫的兩篇部落格(放在參考資料),理解了圖檔的儲存格式,解開了儲存在資料庫的路徑格式之謎。

回顧與發現

因為我是在事後很久在回想這個作業的作法,整個都很不熟,以後要邊做邊寫紀錄,不然只看版控的程式碼紀錄,很多事都想不起來了……這點滿可惜的,下一次寫會更好。而且我發現我忘記要把這份作業的 bug 修正好了,回顧的時候才發現我還沒改好,這次我是希望可以把 git commit 也整理得好看一點,再加油一下吧!

附上餐廳清單所在 Repo

參考資料

簡易檔案上傳網頁 express + multer

[筆記] 使用 Multer 實作大頭貼上傳(Part 1)

[筆記] 使用 Multer 實作大頭貼上傳(Part 2)

--

--

AOI's Blog
AOI's Blog

Written by AOI's Blog

可以叫我蜻蜓或者小葵,請多指教🙌想成為理性與感性兼具的前端工程師,但目前還停留在睡眠不足階段。想做一個獨當一面的創作者。

No responses yet