[筆記] Vue3 實作拖曳點擊上傳結合圖片預覽元件

因專案需求以及客製化樣式,決定自行手刻一個拖曳點擊上傳圖片的區塊,需要兼有圖片預覽、移除圖片、指定格式、檢查檔案大小以及因應 iOS 獨有的 heic 格式的轉檔。

vue.js logo vue


內容

圖片預覽既圖片移除

利用 URL.createObjectURL 來達成,多數的桌機、手機端的瀏覽器都是支援的。

由於是使用裝置的記憶體來儲存,所以關閉時,一定要記得使用 URL.revokeObjectURL 方法來釋放記憶體既移除圖片

指定格式

<input> 的 accept 屬性,以使用 image/ 為開頭並以 , 分隔。

例如允許使用者送 png, jpg ,那就是 “image/png,image/jpg”。 image/* 代表任何格式的圖片

另外在程式碼內,也需透過 File 的 type 屬性來檢查,以防使用者改 <input> 的內容

檢查檔案大小

File 的大小預設數字以 bytes 為單位。若上限為 2 MB,那就用 2 * 1024  * 1024

1MB = 1024 KB = 1048576 Bytes

heic 格式

這在 iOS 手機上會出現,因為其預設的拍攝相片、儲存相片會用 heic 格式,會需要透過轉檔才能給 <img> 標籤使用。src 屬性是不支援 heic 的

實作是搭配 heic-convert 來使用。若要在瀏覽器端支援,要使用 heic-convert/browser


程式碼


參考資料

1. heic-convert
2. HEIC 格式的圖片怎麼辦?使用 heic2any.js 轉換為 JPEG 或 PNG

按讚加入粉絲團

延伸閱讀