add progress event and change file

index.d.ts

@@ -1 +0,0 @@
-declare module 'upload_sdk';

index.js

@@ -1,13 +1,5 @@
-import { getFilemd5sum } from './utils'
-
-const IMAGE_MULTIPART = '/multipart/upload/'
-const VIDEO_MULTIPART = '/upload/'
-
-const IMAGE_TYPE_ERROR = 101
-const VIDOE_TYPE_ERROR = 102
-
-const UPLOAD_SUCCESS_CODE = 200
-const UPLOAD_FAILED_CODE = 400
+import Constants from './utils/contants'
+import generateMd5 from './utils/utils'
 
 function FileFactory(file) {
   this.offset = 0; //用于断点续传，默认为 0
@@ -15,80 +7,90 @@ function FileFactory(file) {
   this.file = file
   this.fileSize = file.size
   this.fileType = (file.name.split('.')[1]).toLowerCase()
-  this.chunkNum =  this.BYTES_PER_CHUNK > this.fileSize ? Math.ceil(this.fileSize / this.BYTES_PER_CHUNK):1
-  this.chunkSize = this.BYTES_PER_CHUNK > this.fileSize ? this.fileSize:this.BYTES_PER_CHUNK
+  this.chunkNum = this.BYTES_PER_CHUNK > this.fileSize ? Math.ceil(this.fileSize / this.BYTES_PER_CHUNK) : 1
+  this.chunkSize = this.BYTES_PER_CHUNK > this.fileSize ? this.fileSize : this.BYTES_PER_CHUNK
 }
 
-FileFactory.prototype.setOffset = function(offset) {
+FileFactory.prototype.setOffset = function (offset) {
   this.offset = offset
 }
 
 export default function UploadSdk(host, origin, token, file) {
-  
-  this.host = host
+
+  this.handlers = [] //用于处理出触发事件
+  this.host = host.indexOf('http:') > -1 ? 'http:'+ host
   this.origin = origin
   this.token = token
   this.file = file
 
   this.generateMd5 = function (callback) {
-    getFilemd5sum(this.file).then(result => {callback(result)})
+    getFilemd5sum(this.file).then(result => {
+      callback(result)
+    })
   }
-  
+
   this.imageUploadAction = function () {
-    return new Promise( (resolve, reject) => {
+    return new Promise((resolve, reject) => {
       let fileFactory = new FileFactory(this.file)
-      if( !fileFactory.fileType.match('[(jpg)|(png)|(gif)]+$')) {
-        reject(IMAGE_TYPE_ERROR)
+      if (!fileFactory.fileType.match('[(jpg)|(png)|(gif)]+$')) {
+        reject(Constants.IMAGE_TYPE_ERROR)
       }
-      this.generateMd5( (md5) => {
+      this.generateMd5((md5) => {
         this.md5 = md5
-        this.postImage(this.md5,fileFactory).then( res => {
+        this.postImage(this.md5, fileFactory).then(res => {
           resolve(res)
-        }).catch( (err) => {
+        }).catch((err) => {
           reject(err)
         })
-      }) 
+      })
     })
   }
 
   this.videoUploadAction = function () {
-    return new Promise( (resolve, reject) => {
-      if( !this.file.type.match('[(mp4)|(rmvb)|(flv)|(mpeg)|(avi)]+$')) {
-        reject(VIDOE_TYPE_ERROR)
+    return new Promise((resolve, reject) => {
+      if (!this.file.type.match('[(mp4)|(rmvb)|(flv)|(mpeg)|(avi)]+$')) {
+        reject(Constants.VIDOE_TYPE_ERROR)
       }
-      this.postVideo().then( res => {
+      this.postVideo().then(res => {
         resolve(res)
-      }).catch( (err) => {
+      }).catch((err) => {
         reject(err)
       })
     })
   }
 
-  this.postVideo = function() {
-    return new Promise( (resolve, reject) => {
+  this.postVideo = function () {
+    const self = this
+    return new Promise((resolve, reject) => {
       let xhr = new XMLHttpRequest()
-      xhr.open('POST', 'http:'+this.host+VIDEO_MULTIPART+this.origin, true)
+      xhr.open('POST', this.host + Constants.VIDEO_MULTIPART + this.origin, true)
       xhr.withCredentials = true;
       xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
-      xhr.setRequestHeader('Content-type','application/json')
+      xhr.setRequestHeader('Content-type', 'application/json')
+      xhr.upload.addEventListener("progress", function updateProgress(oEvent) {
+        if (oEvent.lengthComputable) {
+          let percentComplete = oEvent.loaded / oEvent.total * 100;
+          self.emitUpdateProgress(percentComplete)
+        }
+      }, false)
       let fd = new FormData()
-      fd.append('file',this.file)
-      fd.append('code_rate','ld,sd,hd')
+      fd.append('file', this.file)
+      fd.append('code_rate', 'ld,sd,hd')
       xhr.send(fd)
       xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
           let obj = JSON.parse(xhr.responseText)
           if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
             resolve({
-              code: UPLOAD_SUCCESS_CODE,
+              code: Constants.UPLOAD_SUCCESS_CODE,
               url: obj.url,
               msg: 'success'
             })
           } else {
             reject({
-              code: UPLOAD_FAILED_CODE,
-              url:'',
-              msg:obj.message
+              code: Constants.UPLOAD_FAILED_CODE,
+              url: '',
+              msg: obj.message
             })
           }
         }
@@ -96,42 +98,48 @@ export default function UploadSdk(host, origin, token, file) {
     })
   }
 
-  this.postImage = function(md5,fileFactory) {
+  this.postImage = function (md5, fileFactory) {
     const self = this
     return new Promise((resolve, reject) => {
       let xhr = new XMLHttpRequest()
-      xhr.open('POSt', 'http:'+this.host+IMAGE_MULTIPART+this.origin, true)
+      xhr.upload.addEventListener("progress", function updateProgress(oEvent) {
+        if (oEvent.lengthComputable) {
+          let percentComplete = oEvent.loaded / oEvent.total * 100;
+          self.emitUpdateProgress(percentComplete)
+        }
+      }, false)
+      xhr.open('POSt', this.host + Constants.IMAGE_MULTIPART + this.origin, true)
       xhr.withCredentials = true
       xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
-      xhr.setRequestHeader('X-Upload-File-Size',fileFactory.fileSize)
-      xhr.setRequestHeader('X-Upload-Chunk-Index',1+'')
-      xhr.setRequestHeader('X-Upload-Chunk-Num',fileFactory.chunkNum)
-      xhr.setRequestHeader('X-Upload-Chunk-Size',fileFactory.chunkSize)
-      xhr.setRequestHeader('X-Upload-Offset',fileFactory.offset+'')
-      xhr.setRequestHeader('X-Upload-File-Md5',md5)
-      xhr.setRequestHeader('X-Upload-File-Type',fileFactory.fileType)
+      xhr.setRequestHeader('X-Upload-File-Size', fileFactory.fileSize)
+      xhr.setRequestHeader('X-Upload-Chunk-Index', 1 + '')
+      xhr.setRequestHeader('X-Upload-Chunk-Num', fileFactory.chunkNum)
+      xhr.setRequestHeader('X-Upload-Chunk-Size', fileFactory.chunkSize)
+      xhr.setRequestHeader('X-Upload-Offset', fileFactory.offset + '')
+      xhr.setRequestHeader('X-Upload-File-Md5', md5)
+      xhr.setRequestHeader('X-Upload-File-Type', fileFactory.fileType)
       let fd = new FormData()
-      fd.append('file',this.file)
+      fd.append('file', this.file)
       xhr.send(fd)
       xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
           let obj = JSON.parse(xhr.responseText)
           if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
-            
-            if(obj.status === 1) {
+
+            if (obj.status === 1) {
               resolve({
-                code: UPLOAD_SUCCESS_CODE,
+                code: Constants.UPLOAD_SUCCESS_CODE,
                 url: obj.url,
                 msg: 'success'
               })
             } else if (obj.status === 0) {
               fileFactory.setOffset(obj.msg)
-              this.getAllResponseHeaders.postImage(md5,fileFactory)
+              this.getAllResponseHeaders.postImage(md5, fileFactory)
             }
           } else {
             reject({
-              code: UPLOAD_FAILED_CODE,
-              url:'',
+              code: Constants.UPLOAD_FAILED_CODE,
+              url: '',
               msg: obj.message
             })
           }
@@ -139,4 +147,24 @@ export default function UploadSdk(host, origin, token, file) {
       }
     })
   }
+}
+
+UploadSdk.prototype = {
+
+  onUpdateProgress: function(subscriber){
+    let isExist = this.handlers.some(function(item){
+      return item == subscriber;
+    })
+    if(!isExist){
+      this.handlers.push(subscriber);
+    }
+    return this;
+  },
+  
+  emitUpdateProgress: function(data){
+    this.handlers.forEach(function(fn){
+      fn(data)
+    })
+    return this;
+  }
 }

utils/contants.js

@@ -0,0 +1,8 @@
+export default const Constants = {
+  IMAGE_MULTIPART: '/multipart/upload/'
+  VIDEO_MULTIPART: '/upload/'
+  IMAGE_TYPE_ERROR: 101
+  VIDOE_TYPE_ERROR: 102
+  UPLOAD_SUCCESS_CODE: 200
+  UPLOAD_FAILED_CODE: 400
+}

utils.js → utils/utils.js

@@ -1,6 +1,6 @@
 import SparkMD5 from 'spark-md5'
 
-export function getFilemd5sum(ofile) {
+export default function getFilemd5sum(ofile) {
     return new Promise((resolve, reject) => {
         let file = ofile;
         let tmp_md5;