最近M端專案中涉及到圖片上傳功能，現把專案中遇到的一些問題及解決辦法分享如下，與各位共同探討：

一、相關需求：

1. 客戶端上限10M
2. 伺服器端上限2M
3. 檔案過濾
4. 顯示上傳進度
5. 非同步上傳
6. 多檔案上傳

二、需求分析：

1. 實現2，可使用canvas在前端實現壓縮(base64)；
2. 實1、3，可採用file.size及/image/.test(file.type)過濾；
3. 實現4，使用XHR2實現上傳，新增進度時間監控，xhr.upload.addEventListener(“progress”, uploadProgress, false)；
4. 實現5，使用XHR2實現上傳；
5. 多檔案上傳，單檔案迴圈上傳即可，但是相容進度時，需單檔案各自監控；

三、需求實現：

實現一：二進位制方式上傳
需求1、3、4、5、6皆可實現，但是伺服器端上傳2M，使用canvas方式壓縮後生成的是base64，若使用此方式上傳，必須把base64轉換成二進位制流，GitHub上也有相關文章把base64轉換成二進位制流的，使用xhr.sendAsBinary（）傳送二進位制流，參考此文，測了一部分常見機型，可以實現，具體是否可以在專案中使用還有待論證。二進位制上傳實現部分程式碼僅供參考：

01	var uploadFile = function(fileid, file) {

02	var xhr = new XMLHttpRequest(),

03	fd = new FormData,

04	url = "/picture/upload",

05

// 上傳進度

06	uploadProgress = function(evt) {

07	if (evt.lengthComputable) {

08	var  percent = (evt.loaded * 100 / evt.total).toFixed(1);

09	// show percent

10

}else {

11	console.log('unable to compute');

相關推薦