Browse Source

add progress event and change file

ChrisFuck 5 years ago
parent
commit
539153b790
4 changed files with 92 additions and 57 deletions
  1. 0
    1
      index.d.ts
  2. 83
    55
      index.js
  3. 8
    0
      utils/contants.js
  4. 1
    1
      utils/utils.js

+ 0
- 1
index.d.ts View File

1
-declare module 'upload_sdk';

+ 83
- 55
index.js View File

1
-import { getFilemd5sum } from './utils'
2
-
3
-const IMAGE_MULTIPART = '/multipart/upload/'
4
-const VIDEO_MULTIPART = '/upload/'
5
-
6
-const IMAGE_TYPE_ERROR = 101
7
-const VIDOE_TYPE_ERROR = 102
8
-
9
-const UPLOAD_SUCCESS_CODE = 200
10
-const UPLOAD_FAILED_CODE = 400
1
+import Constants from './utils/contants'
2
+import generateMd5 from './utils/utils'
11
 
3
 
12
 function FileFactory(file) {
4
 function FileFactory(file) {
13
   this.offset = 0; //用于断点续传,默认为 0
5
   this.offset = 0; //用于断点续传,默认为 0
15
   this.file = file
7
   this.file = file
16
   this.fileSize = file.size
8
   this.fileSize = file.size
17
   this.fileType = (file.name.split('.')[1]).toLowerCase()
9
   this.fileType = (file.name.split('.')[1]).toLowerCase()
18
-  this.chunkNum =  this.BYTES_PER_CHUNK > this.fileSize ? Math.ceil(this.fileSize / this.BYTES_PER_CHUNK):1
19
-  this.chunkSize = this.BYTES_PER_CHUNK > this.fileSize ? this.fileSize:this.BYTES_PER_CHUNK
10
+  this.chunkNum = this.BYTES_PER_CHUNK > this.fileSize ? Math.ceil(this.fileSize / this.BYTES_PER_CHUNK) : 1
11
+  this.chunkSize = this.BYTES_PER_CHUNK > this.fileSize ? this.fileSize : this.BYTES_PER_CHUNK
20
 }
12
 }
21
 
13
 
22
-FileFactory.prototype.setOffset = function(offset) {
14
+FileFactory.prototype.setOffset = function (offset) {
23
   this.offset = offset
15
   this.offset = offset
24
 }
16
 }
25
 
17
 
26
 export default function UploadSdk(host, origin, token, file) {
18
 export default function UploadSdk(host, origin, token, file) {
27
-  
28
-  this.host = host
19
+
20
+  this.handlers = [] //用于处理出触发事件
21
+  this.host = host.indexOf('http:') > -1 ? 'http:'+ host
29
   this.origin = origin
22
   this.origin = origin
30
   this.token = token
23
   this.token = token
31
   this.file = file
24
   this.file = file
32
 
25
 
33
   this.generateMd5 = function (callback) {
26
   this.generateMd5 = function (callback) {
34
-    getFilemd5sum(this.file).then(result => {callback(result)})
27
+    getFilemd5sum(this.file).then(result => {
28
+      callback(result)
29
+    })
35
   }
30
   }
36
-  
31
+
37
   this.imageUploadAction = function () {
32
   this.imageUploadAction = function () {
38
-    return new Promise( (resolve, reject) => {
33
+    return new Promise((resolve, reject) => {
39
       let fileFactory = new FileFactory(this.file)
34
       let fileFactory = new FileFactory(this.file)
40
-      if( !fileFactory.fileType.match('[(jpg)|(png)|(gif)]+$')) {
41
-        reject(IMAGE_TYPE_ERROR)
35
+      if (!fileFactory.fileType.match('[(jpg)|(png)|(gif)]+$')) {
36
+        reject(Constants.IMAGE_TYPE_ERROR)
42
       }
37
       }
43
-      this.generateMd5( (md5) => {
38
+      this.generateMd5((md5) => {
44
         this.md5 = md5
39
         this.md5 = md5
45
-        this.postImage(this.md5,fileFactory).then( res => {
40
+        this.postImage(this.md5, fileFactory).then(res => {
46
           resolve(res)
41
           resolve(res)
47
-        }).catch( (err) => {
42
+        }).catch((err) => {
48
           reject(err)
43
           reject(err)
49
         })
44
         })
50
-      }) 
45
+      })
51
     })
46
     })
52
   }
47
   }
53
 
48
 
54
   this.videoUploadAction = function () {
49
   this.videoUploadAction = function () {
55
-    return new Promise( (resolve, reject) => {
56
-      if( !this.file.type.match('[(mp4)|(rmvb)|(flv)|(mpeg)|(avi)]+$')) {
57
-        reject(VIDOE_TYPE_ERROR)
50
+    return new Promise((resolve, reject) => {
51
+      if (!this.file.type.match('[(mp4)|(rmvb)|(flv)|(mpeg)|(avi)]+$')) {
52
+        reject(Constants.VIDOE_TYPE_ERROR)
58
       }
53
       }
59
-      this.postVideo().then( res => {
54
+      this.postVideo().then(res => {
60
         resolve(res)
55
         resolve(res)
61
-      }).catch( (err) => {
56
+      }).catch((err) => {
62
         reject(err)
57
         reject(err)
63
       })
58
       })
64
     })
59
     })
65
   }
60
   }
66
 
61
 
67
-  this.postVideo = function() {
68
-    return new Promise( (resolve, reject) => {
62
+  this.postVideo = function () {
63
+    const self = this
64
+    return new Promise((resolve, reject) => {
69
       let xhr = new XMLHttpRequest()
65
       let xhr = new XMLHttpRequest()
70
-      xhr.open('POST', 'http:'+this.host+VIDEO_MULTIPART+this.origin, true)
66
+      xhr.open('POST', this.host + Constants.VIDEO_MULTIPART + this.origin, true)
71
       xhr.withCredentials = true;
67
       xhr.withCredentials = true;
72
       xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
68
       xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
73
-      xhr.setRequestHeader('Content-type','application/json')
69
+      xhr.setRequestHeader('Content-type', 'application/json')
70
+      xhr.upload.addEventListener("progress", function updateProgress(oEvent) {
71
+        if (oEvent.lengthComputable) {
72
+          let percentComplete = oEvent.loaded / oEvent.total * 100;
73
+          self.emitUpdateProgress(percentComplete)
74
+        }
75
+      }, false)
74
       let fd = new FormData()
76
       let fd = new FormData()
75
-      fd.append('file',this.file)
76
-      fd.append('code_rate','ld,sd,hd')
77
+      fd.append('file', this.file)
78
+      fd.append('code_rate', 'ld,sd,hd')
77
       xhr.send(fd)
79
       xhr.send(fd)
78
       xhr.onreadystatechange = function () {
80
       xhr.onreadystatechange = function () {
79
         if (xhr.readyState === 4) {
81
         if (xhr.readyState === 4) {
80
           let obj = JSON.parse(xhr.responseText)
82
           let obj = JSON.parse(xhr.responseText)
81
           if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
83
           if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
82
             resolve({
84
             resolve({
83
-              code: UPLOAD_SUCCESS_CODE,
85
+              code: Constants.UPLOAD_SUCCESS_CODE,
84
               url: obj.url,
86
               url: obj.url,
85
               msg: 'success'
87
               msg: 'success'
86
             })
88
             })
87
           } else {
89
           } else {
88
             reject({
90
             reject({
89
-              code: UPLOAD_FAILED_CODE,
90
-              url:'',
91
-              msg:obj.message
91
+              code: Constants.UPLOAD_FAILED_CODE,
92
+              url: '',
93
+              msg: obj.message
92
             })
94
             })
93
           }
95
           }
94
         }
96
         }
96
     })
98
     })
97
   }
99
   }
98
 
100
 
99
-  this.postImage = function(md5,fileFactory) {
101
+  this.postImage = function (md5, fileFactory) {
100
     const self = this
102
     const self = this
101
     return new Promise((resolve, reject) => {
103
     return new Promise((resolve, reject) => {
102
       let xhr = new XMLHttpRequest()
104
       let xhr = new XMLHttpRequest()
103
-      xhr.open('POSt', 'http:'+this.host+IMAGE_MULTIPART+this.origin, true)
105
+      xhr.upload.addEventListener("progress", function updateProgress(oEvent) {
106
+        if (oEvent.lengthComputable) {
107
+          let percentComplete = oEvent.loaded / oEvent.total * 100;
108
+          self.emitUpdateProgress(percentComplete)
109
+        }
110
+      }, false)
111
+      xhr.open('POSt', this.host + Constants.IMAGE_MULTIPART + this.origin, true)
104
       xhr.withCredentials = true
112
       xhr.withCredentials = true
105
       xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
113
       xhr.setRequestHeader('Authorization', `Bearer ${this.token}`)
106
-      xhr.setRequestHeader('X-Upload-File-Size',fileFactory.fileSize)
107
-      xhr.setRequestHeader('X-Upload-Chunk-Index',1+'')
108
-      xhr.setRequestHeader('X-Upload-Chunk-Num',fileFactory.chunkNum)
109
-      xhr.setRequestHeader('X-Upload-Chunk-Size',fileFactory.chunkSize)
110
-      xhr.setRequestHeader('X-Upload-Offset',fileFactory.offset+'')
111
-      xhr.setRequestHeader('X-Upload-File-Md5',md5)
112
-      xhr.setRequestHeader('X-Upload-File-Type',fileFactory.fileType)
114
+      xhr.setRequestHeader('X-Upload-File-Size', fileFactory.fileSize)
115
+      xhr.setRequestHeader('X-Upload-Chunk-Index', 1 + '')
116
+      xhr.setRequestHeader('X-Upload-Chunk-Num', fileFactory.chunkNum)
117
+      xhr.setRequestHeader('X-Upload-Chunk-Size', fileFactory.chunkSize)
118
+      xhr.setRequestHeader('X-Upload-Offset', fileFactory.offset + '')
119
+      xhr.setRequestHeader('X-Upload-File-Md5', md5)
120
+      xhr.setRequestHeader('X-Upload-File-Type', fileFactory.fileType)
113
       let fd = new FormData()
121
       let fd = new FormData()
114
-      fd.append('file',this.file)
122
+      fd.append('file', this.file)
115
       xhr.send(fd)
123
       xhr.send(fd)
116
       xhr.onreadystatechange = function () {
124
       xhr.onreadystatechange = function () {
117
         if (xhr.readyState === 4) {
125
         if (xhr.readyState === 4) {
118
           let obj = JSON.parse(xhr.responseText)
126
           let obj = JSON.parse(xhr.responseText)
119
           if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
127
           if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
120
-            
121
-            if(obj.status === 1) {
128
+
129
+            if (obj.status === 1) {
122
               resolve({
130
               resolve({
123
-                code: UPLOAD_SUCCESS_CODE,
131
+                code: Constants.UPLOAD_SUCCESS_CODE,
124
                 url: obj.url,
132
                 url: obj.url,
125
                 msg: 'success'
133
                 msg: 'success'
126
               })
134
               })
127
             } else if (obj.status === 0) {
135
             } else if (obj.status === 0) {
128
               fileFactory.setOffset(obj.msg)
136
               fileFactory.setOffset(obj.msg)
129
-              this.getAllResponseHeaders.postImage(md5,fileFactory)
137
+              this.getAllResponseHeaders.postImage(md5, fileFactory)
130
             }
138
             }
131
           } else {
139
           } else {
132
             reject({
140
             reject({
133
-              code: UPLOAD_FAILED_CODE,
134
-              url:'',
141
+              code: Constants.UPLOAD_FAILED_CODE,
142
+              url: '',
135
               msg: obj.message
143
               msg: obj.message
136
             })
144
             })
137
           }
145
           }
139
       }
147
       }
140
     })
148
     })
141
   }
149
   }
150
+}
151
+
152
+UploadSdk.prototype = {
153
+
154
+  onUpdateProgress: function(subscriber){
155
+    let isExist = this.handlers.some(function(item){
156
+      return item == subscriber;
157
+    })
158
+    if(!isExist){
159
+      this.handlers.push(subscriber);
160
+    }
161
+    return this;
162
+  },
163
+  
164
+  emitUpdateProgress: function(data){
165
+    this.handlers.forEach(function(fn){
166
+      fn(data)
167
+    })
168
+    return this;
169
+  }
142
 }
170
 }

+ 8
- 0
utils/contants.js View File

1
+export default const Constants = {
2
+  IMAGE_MULTIPART: '/multipart/upload/'
3
+  VIDEO_MULTIPART: '/upload/'
4
+  IMAGE_TYPE_ERROR: 101
5
+  VIDOE_TYPE_ERROR: 102
6
+  UPLOAD_SUCCESS_CODE: 200
7
+  UPLOAD_FAILED_CODE: 400
8
+}

utils.js → utils/utils.js View File

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