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