在WEB開發中,對於大尺寸圖片的上傳, 傳統做法是把本地文件完整的上傳到服務器, 再由服務器做壓縮處理

現在大量使用移動端的情況下, 這種方式極大的浪費移動端的流量

用原生APP的方法很輕易的實現本地壓縮圖片後再上傳, 以達到節省流量的目的,

但WEB開發有沒辦法也進行壓縮後再上傳呢? 答案是可以的!

看完本文能學(得)到什麼

- 純JS前端壓縮圖片

- 文件上傳前後端實現方法

- 完整源碼(下載後可直接運行)

實現步驟

建立Node.js項目

利用package.json可以自動安裝必要有組件

組件安裝完成後,在項目中會多出node_modules目錄

找到根目錄的index.js運行它

node index.js

啟動成功後, 用一個標準的瀏覽器(比如Chrome)輸入訪問地址

你也可以用這個地址:

http://127.0.0.1:3000/html/piczip.html

選擇一個2MB或更大的文件, 如果你感興趣, 還沒上傳前就可以把預覽圖另存到本地, 跟原文件對比一下,看是不是已經壓縮成功!

點擊[上傳]可以得到後端回傳的上傳後的信息

done!

代碼簡析

如果你的項目成功運行起來, 恭喜你! 下面可以來看一看關鍵代碼

首先是piczip.html的_UP_paras, 它有好幾個屬性, 你可以按需要設置它們

其實比較重要的是previewImg_id, 它是DOM對象IMG的ID, 依賴它才能實現圖像上傳前的預覽功能

其它的是一些動態顯示,可用可不用

然後是function UploadFile(), 這個方法要你自己實現它, 主要包含:

- 接收上傳文件的後臺地址

- 其他你需要一起提交的域(字段)和值

圖像壓縮的質量度是個重要的參數, 如果你要自己控制它, 可以去fileup.js裡找到它

下圖例中的0.7表示壓縮至70%的質量度

當然如果你想的話, 也可以壓縮圖片的尺寸(寬和高)

源碼共享

最後提供源碼地址, 有需要的朋友可以自行下載

https://github.com/visionsl/fileupload

本文借鑑了網上的代碼進行改良, 如有侵權請告知刪除

---

分享到:

---

閱讀更多 物聯創客 的文章

關鍵字: 壓縮 Chrome 服務器

---