修复浏览器兼容性问题

Author: zhangheng

package.json

@@ -1,7 +1,7 @@
 {
   "name": "qiniu-js",
   "jsName": "qiniu",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "private": false,
   "description": "Javascript SDK for Qiniu Resource (Cloud) Storage AP",
   "main": "dist/qiniu.min.js",

src/upload.js

@@ -14,6 +14,7 @@ import {
   request,
   computeMd5,
   getUploadUrl,
+  isAndroidBrowser,
   filterParams
 } from "./utils";
 
@@ -56,6 +57,7 @@ export class UploadManager {
     this.onError = () => {};
     this.onComplete = () => {};
     this.retryCount = 0;
+    this.isAndroidBrowser = isAndroidBrowser();
     Object.assign(this, handlers);
   }
 
@@ -231,6 +233,10 @@ export class UploadManager {
         onProgress,
         onCreate
       }).then(response => {
+        if (this.isAndroidBrowser) {
+          console.log("android..."); // 对于低版本安卓浏览器，因为无法触发 xhr 的 progress 事件，这里 fake 下
+          onProgress({ loaded: chunk.size });
+        }
         this.ctxList[index] = {
           time: new Date().getTime(),
           ctx: response.data.ctx,
@@ -272,8 +278,15 @@ export class UploadManager {
   }
 
   finishDirectProgress(){
+    // 对于低版本安卓浏览器，progress 为 null， 这里 fake 下
+    if (this.isAndroidBrowser) {
+      this.progress = { total: this.getProgressInfoItem(this.file.size, this.file.size) };
+      this.onData(this.progress);
+      return;
+    }
+
     let total = this.progress.total;
-    this.progress.total = this.getProgressInfoItem(total.loaded + 1, total.size);
+    this.progress = { total: this.getProgressInfoItem(total.loaded + 1, total.size) };
     this.onData(this.progress);
   }
 

src/utils.js

@@ -323,3 +323,17 @@ export function getTransform(image, orientation) {
         };
   }
 }
+
+// 检查低版本浏览器的措施
+export function isAndroidBrowser() {
+  let navU = navigator.userAgent;
+  // Android Mobile
+  let isAndroidMobile = navU.indexOf("Android") > -1
+    && navU.indexOf("Mozilla/5.0") > -1 && navU.indexOf("AppleWebKit") > -1;
+  // Android Browser (not Chrome)
+  let regExAppleWebKit = new RegExp(/AppleWebKit\/([\d.]+)/);
+  let resultAppleWebKitRegEx = regExAppleWebKit.exec(navU);
+  let appleWebKitVersion = (resultAppleWebKitRegEx === null ? null : parseFloat(regExAppleWebKit.exec(navU)[1]));
+  let isAndroidBrowser = isAndroidMobile && appleWebKitVersion !== null && appleWebKitVersion < 537;
+  return isAndroidBrowser;
+}

test/demo2/package.json

@@ -15,9 +15,9 @@
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.0",
     "babel-runtime": "^6.26.0",
-    "qiniu-js":"^2.0.2",
     "es3ify-loader": "^0.2.0",
     "open-browser-webpack-plugin": "0.0.5",
+    "qiniu-js": "^2.5.1",
     "uglifyjs-webpack-plugin": "^1.1.6",
     "webpack": "^3.6.0",
     "webpack-dev-server": "^2.9.1"