[[175194]]

這是一個很簡單的方案。嗯，是真的。

為什么要這么做?

在移動Web蓬勃發展的今天，有太多太多的應用需要讓用戶在移動Web上傳圖片文件了，正因如此，我們有些困難必須去攻克：

1. 低網速下上傳進度緩慢，用戶體驗差
2. 高并發下，后臺處理較大的上傳文件壓力大
3. 或許有更多...

在攻克上面的一些困難時，我們也可以給自己一些疑問：

1. 真的有必要保存用戶上傳的原圖嗎?
2. 用戶還能等多久?
3. 或許還有更多...

結合上面的一些困難和疑問，再結合我們實際的案例，我們或許可以這樣做 —— 在用戶上傳圖片時，圖片被提交到后臺之前，就對圖片進行壓縮處理。圖片文件大小減小后，上傳速度自然會提示，在同樣的并發下，后臺處理的速度也會得到提升，用戶體驗得到提升。

有童鞋可能會說，為什么不使用一些主流CDN的表單功能，直接把文件上傳到CDN去?當然，完全可以選擇那種方案，我只是在眾多的方案中選擇了一個來用而已，又或者說這是程序員的天性?

準備

上面已經說了 “在用戶上傳圖片時，圖片被提交到后臺之前，就對圖片進行壓縮處理。”，那我們馬上準備下各種工具吧：

1. localResizeIMG(核心，用于在前端對圖片進行壓縮)
2. Vue.js(處理前端的數據，展現邏輯)
3. Bootstrap(還要我多說?)

怎么做?

1. 上傳項目變更后，使用localResizeIMG進行壓縮
2. 把數據通過自己期望的方式提交到后臺

localResizeIMG在調用時，就可以指定壓縮后圖片的寬度高度以及質量(詳細參考文檔)，至于要怎么把數據提交到后臺，可以參考該庫的wiki中提到的方案，一切都很簡單。

演示地址

這個例子的倉庫地址

本文的解決方法并不是唯一，也不一定是***，在使用相關的框架/庫時遇到的問題，可以去相應的Github倉庫查看issue或者wiki。