iT邦幫忙

0

[ 請問 ] 論前端在影片、音樂、圖片、文章上的應用

  • 分享至 

  • xImage

剛轉職前端沒多久,一些概念還沒理解

1.前端在圖片上通常是用什麼形式做存取的,傳給後端通常丟什麼格式做存的動作,那麼取通常又是拿什麼樣的格式呢?base64嗎?那像是那種漫畫類型的網站又是怎麼玩的?這樣對效能不會有負擔嗎(像是一進頁面是空白 loading 一段時間後才突然出現)?通常會怎麼解決?通常資料庫又是存取什麼ㄧ樣的型態?

2.前端在如果想上傳音樂或是影片,丟給後端的格式又是什麼?跟圖片的格式一樣?存與取又是怎麼樣的格式?資料庫上的型態通常又是什麼樣的型態?有聽到過 m3u8 的格式,那前端扮演什麼樣的角色呢?前端發api拿到 m3u8 檔案,然後根據清單把裡面的ts檔在前端兜出來播放(自己胡亂想的,打出來方便被修正)?也是為了解決loading的問題吧?

3.前端在這類帶有文章,文章內容格式不固定可能還帶有粗體、圖片等等效果的文章(帖子),通常都是怎麼存取的前端要丟什麼東西到後端去存取,後端又是怎麼做處理的?

抱歉,沒什麼概念所以問題挺多的,還請各位大神賜教

(問題雖然超出前端範疇,還是想明白一下通常整個流程是怎麼玩的,能的話,給些範例之類的參考,小弟比較好理解)

/images/emoticon/emoticon41.gif/images/emoticon/emoticon41.gif/images/emoticon/emoticon41.gif

froce iT邦大師 1 級 ‧ 2023-05-31 08:59:34 檢舉
1. 都2023年了,除非有特殊需求,請盡量用formdata 傳,傳到資料庫要看後端怎麼做,存成檔案,資料庫上存檔案路徑、甚至是送到S3 相容的雲端存儲的都有。直接存到資料庫的現在應該比較少了。圖多的話前端會做lazy loading。

2.上傳 一樣formdata,除非有特殊需求。m3u8這種清單前端存取只要去讀m3u8,剩下就只是連續依照清單找相對應的片段,這個現在套件都會幫你處理好。

3. 去研究一些editor你就知道了,不是markdown的話,editor都會有自己定義的文件格式,通常是json格式的來定義。
後端並不需要管你送來的是啥,他只要存到資料庫就好。

另外這些通常都是前後端一起討論或後端直接開出api規格的,你要研究我會建議你找個框架寫個全端的side project比較快也比較扎實。
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
㊣浩瀚星空㊣
iT邦大神 1 級 ‧ 2023-05-31 08:05:00
最佳解答

1.前端在圖片上通常是用什麼形式做存取的,傳給後端通常丟什麼格式做存的動作,那麼取通常又是拿什麼樣的格式呢?base64嗎?那像是那種漫畫類型的網站又是怎麼玩的?這樣對效能不會有負擔嗎(像是一進頁面是空白 loading 一段時間後才突然出現)?通常會怎麼解決?通常資料庫又是存取什麼ㄧ樣的型態?

一般在前端本機上,很少會做存取,大多都是直接取用BLOB物件處理暫存應用。BLOB應用你再去查一下。要說明及其應用會比較長。

給後端應用的,目前大多數還是會傳 formdata 模式居多。但也確實有人會將其化成base64來傳。
其兩種方式各有利弊。一般小圖片或是繪圖應用出來的圖,比較常用base64來處理。但大圖還是建議用 formdata 來處理。

至於 loading 常用的就是縮圖、後載、緩存等技術來處理。
而一般圖片內容並不建議直接存到資料庫內。如果真要存的話。請使用 bin 或blob 二進位模式儲存

2.前端在如果想上傳音樂或是影片,丟給後端的格式又是什麼?跟圖片的格式一樣?存與取又是怎麼樣的格式?資料庫上的型態通常又是什麼樣的型態?有聽到過 m3u8 的格式,那前端扮演什麼樣的角色呢?前端發api拿到 m3u8 檔案,然後根據清單把裡面的ts檔在前端兜出來播放(自己胡亂想的,打出來方便被修正)?也是為了解決loading的問題吧?

原則上跟上傳圖片一樣。這邊就不多做說明。
影音檔大多數是利用瀏覽器本身的特性。
至於你說的 ts 。這一般是串流特性了。這說明起來會洛洛長。所以我就略過不說明了。
但其實這樣的技術,一般也不是單純為了loading考量。它還有加密保護的用意。

3.前端在這類帶有文章,文章內容格式不固定可能還帶有粗體、圖片等等效果的文章(帖子),通常都是怎麼存取的前端要丟什麼東西到後端去存取,後端又是怎麼做處理的?

這你直接參考所見即所得編輯器。(例:CKEDITOR)
幾乎是 html 格式。
現在的所見即所得編輯器很方便了。可以不需要再去理解怎麼處理。

看更多先前的回應...收起先前的回應...
froce iT邦大師 1 級 ‧ 2023-05-31 10:15:26 檢舉

幾乎是 html 格式。

這個...我會建議盡量不要用,像星空大這樣的我不用提醒,但新手可能會忽略資安疑慮。用html後端還得先去過濾tag和prop。

如果editor能輸出json,資料庫也收json,解析讓前端editor自己處理會是比較安全的作法。

其實現在大多數新的編輯器。
本身都已經存在過濾tag和prop

當然了,的確也需要跟新手說明這些事也沒錯。
畢竟使用 html 格式。其也代表了 script 、 on 等JS應用也有可能會被注入處理。還有就是 style 的應用導致破版的問題存在。

如果要自已寫處理html應用格式的話,確實要非常小心這些。
但如果使用編輯器的話。現在新版的是還不用太過擔心。
只要不要自幹程式@@"

froce iT邦大師 1 級 ‧ 2023-06-01 11:23:01 檢舉

我說的是後端也還是要做這些事,前端送出的html會有偽造的問題。
但這個問題其實找個能輸出json的editor就好了,這點前端可以提醒。而且後端如果還有些什麼需要分析內容的事,json會比html好分析多了。

結論應該是不要相信前端XDDD

我要發表回答

立即登入回答