[[175194]]

這是一個(gè)很簡(jiǎn)單的方案。嗯，是真的。

為什么要這么做?

在移動(dòng)Web蓬勃發(fā)展的今天，有太多太多的應(yīng)用需要讓用戶(hù)在移動(dòng)Web上傳圖片文件了，正因如此，我們有些困難必須去攻克：

1. 低網(wǎng)速下上傳進(jìn)度緩慢，用戶(hù)體驗(yàn)差
2. 高并發(fā)下，后臺(tái)處理較大的上傳文件壓力大
3. 或許有更多...

在攻克上面的一些困難時(shí)，我們也可以給自己一些疑問(wèn)：

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

結(jié)合上面的一些困難和疑問(wèn)，再結(jié)合我們實(shí)際的案例，我們或許可以這樣做 —— 在用戶(hù)上傳圖片時(shí)，圖片被提交到后臺(tái)之前，就對(duì)圖片進(jìn)行壓縮處理。圖片文件大小減小后，上傳速度自然會(huì)提示，在同樣的并發(fā)下，后臺(tái)處理的速度也會(huì)得到提升，用戶(hù)體驗(yàn)得到提升。

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

準(zhǔn)備

上面已經(jīng)說(shuō)了 “在用戶(hù)上傳圖片時(shí)，圖片被提交到后臺(tái)之前，就對(duì)圖片進(jìn)行壓縮處理。”，那我們馬上準(zhǔn)備下各種工具吧：

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

怎么做?

1. 上傳項(xiàng)目變更后，使用localResizeIMG進(jìn)行壓縮
2. 把數(shù)據(jù)通過(guò)自己期望的方式提交到后臺(tái)

localResizeIMG在調(diào)用時(shí)，就可以指定壓縮后圖片的寬度高度以及質(zhì)量(詳細(xì)參考文檔)，至于要怎么把數(shù)據(jù)提交到后臺(tái)，可以參考該庫(kù)的wiki中提到的方案，一切都很簡(jiǎn)單。

演示地址

這個(gè)例子的倉(cāng)庫(kù)地址

本文的解決方法并不是唯一，也不一定是***，在使用相關(guān)的框架/庫(kù)時(shí)遇到的問(wèn)題，可以去相應(yīng)的Github倉(cāng)庫(kù)查看issue或者wiki。