資訊專欄INFORMATION COLUMN
摘要：簡介本文結合實際項目場景，記錄圖片上傳時的一種本地壓縮預覽解決方案。考慮到這些問題，決定采用本地圖片進行預覽。解決過程接下來說明將待上傳的本地圖片展示到界面中。這樣就在前端實現了簡單的圖片壓縮處理。
簡介
本文結合實際項目場景，記錄圖片上傳時的一種本地壓縮預覽解決方案。這里的本地預覽是指，頁面上的圖片是讀取的本機資源進行展示，而沒有通過網絡請求加載。
實際的項目場景在這陣子的項目開發中需要上傳圖片。需求很簡單，能上傳圖片，并按如下UI效果展示即可。
圖1 上傳完成后的效果
開發時，我首先是對新選擇圖片的上傳進度進行了加載展示，等到單個圖片上傳完成，調取相應api拿到圖片的存儲url，然后根據url加載圖片展示在界面。像這樣：
圖2. 原始的uploading UI
不足之處以上是原始開發方案，弄完之后，我發現這樣有兩個比較大的問題：
圖片需要等到上傳結束，并拿到下載url才能展示在界面，而上傳過程中，則看不到圖片的樣子(如上圖2). 這樣用戶只能在上傳完成后才能檢查是否選擇正確。
圖片上傳完后，需要加載url以顯示圖片，相當于上傳后又從存儲服務器下載了一遍。這不僅占用網絡資源，而且會導致「上傳完畢到圖片展示出來 兩者之間的卡頓」，因為加載圖片需要時間。
考慮到這些問題，決定采用本地圖片進行預覽。 這樣上面兩個問題都能解決——上傳過程中能預覽圖片、上傳完成后不需再從服務器加載 。
解決過程接下來說明將待上傳的本地圖片展示到界面中。
這里我使用的是HTML5的FileReader對象來讀取選中的圖片數據，FileReader對象提供的API中有一個是「readAsDataURL」，顧名思義，就是讀取文件內容并處理成一種特殊的URL地址，該URL地址能直接加載到頁面中, 比如賦值給img元素的src屬性。
現在假設已經獲取到了圖片的file source——比如從中的files，然后通過如下簡單的幾行代碼就能讀取文件：
export const readFile = (file)=>{
return new Promise((resolve)=>{
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(){
//讀取完會觸發unload事件, 同時result屬性就是需要的結果，它的格式為「data:URL」
// do something with this.result
// e.g: resolve(this.result)
//...
});
};
});
};
將上訴結果作為圖片加載到上傳頁面中，這樣，在上傳之前，就能先讀取圖片并展示到頁面中了。uploading UI 變成了這樣子：
圖3: 改進之后的uploading UI
繼續改進 – 圖片壓縮至此似乎已經解決問題了，但考慮到該業務場景下，圖片都是以小圖展示的，所以又想著可以把圖片壓縮一下再預覽，畢竟FileReader的readAsDataURL方法是直接以base64對圖片進行編碼的，不壓縮的話吃內存較多。
壓縮是借助canvas畫布技術來做的。大體步驟就是將上傳的大圖畫到一張小的畫布上，然后將新繪制的小畫布導出成data URL作為輸入結果。這樣就在前端實現了簡單的圖片壓縮處理。
備注該方案尚存諸多不足之處，比如最起碼的FileReader兼容性問題，在IE10以下版本就不支持。網上對IE舊版本建議用「濾鏡」來兼容。 歡迎討論。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80458.html
摘要：哈哈主要還是我嫌麻煩四上傳圖片這里的頁面樣式，圖片壓縮和預覽都和上面一樣，這里我主要配置一下的，讓接口能夠成功上傳。如果想讓用戶有更好的體驗，可以對圖片進行一下壓縮和本地預覽。 一、通過Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過表單自有屬性進行提交，看似簡單，但是也有其最大的缺點，那就是提交...
摘要：哈哈主要還是我嫌麻煩四上傳圖片這里的頁面樣式，圖片壓縮和預覽都和上面一樣，這里我主要配置一下的，讓接口能夠成功上傳。如果想讓用戶有更好的體驗，可以對圖片進行一下壓縮和本地預覽。 一、通過Form表單提交上傳 HTML enctype屬性必不可少 上面一種方法通過表單自有屬性進行提交，看似簡單，但是也有其最大的缺點，那就是提交...
摘要：發布應用市場的平臺搶紅包工具紅包精靈開源啦掘金紅包精靈，如果喜歡，點個開源不易。作者將原素材文章進行了新內容的添加和重新排列，但是因為文章高效的代碼編寫技巧總結前端掘金本文總結了代碼編寫技巧，來提升你的和代碼。 收藏安卓開發中非常實用優秀的庫! 有圖有真相! - Android - 掘金本來是打算收藏工具類的,但轉念一想,已經有這么多優秀的庫了,就沒必要再去重復造輪子了,便歸納工作中比...
摘要：表示不一定是原生形式的數據。接口基于，繼承了的功能并將其擴展使其支持用戶系統上的文件。讀取操作完成的時候，會變成已完成，并觸發事件，同時屬性將包含一個格式的字符串編碼以表示所讀取文件的內容。 溫馨提示：這里除了一些幼稚的小組件啥也沒有溫馨提示-續：這是一個新的系列，寫一些實際開發中遇到的一些常用的功能，想法笨拙，代碼亂套 寫在前面 圖片上傳，作為web端一個常用的功能，在不同的項目中有...
閱讀 3909·2021-09-27 13:35
閱讀 1084·2021-09-24 09:48
閱讀 2913·2021-09-22 15:42
閱讀 2354·2021-09-22 15:28
閱讀 3158·2019-08-30 15:43
閱讀 2625·2019-08-30 13:52
閱讀 2982·2019-08-29 12:48
閱讀 1463·2019-08-26 13:55
