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 +0,0 @@
1
-declare module 'upload_sdk';

+ 83
- 55
index.js View File

@@ -1,13 +1,5 @@
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 4
 function FileFactory(file) {
13 5
   this.offset = 0; //用于断点续传,默认为 0
@@ -15,80 +7,90 @@ function FileFactory(file) {
15 7
   this.file = file
16 8
   this.fileSize = file.size
17 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 15
   this.offset = offset
24 16
 }
25 17
 
26 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 22
   this.origin = origin
30 23
   this.token = token
31 24
   this.file = file
32 25
 
33 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 32
   this.imageUploadAction = function () {
38
-    return new Promise( (resolve, reject) => {
33
+    return new Promise((resolve, reject) => {
39 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 39
         this.md5 = md5
45
-        this.postImage(this.md5,fileFactory).then( res => {
40
+        this.postImage(this.md5, fileFactory).then(res => {
46 41
           resolve(res)
47
-        }).catch( (err) => {
42
+        }).catch((err) => {
48 43
           reject(err)
49 44
         })
50
-      }) 
45
+      })
51 46
     })
52 47
   }
53 48
 
54 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 55
         resolve(res)
61
-      }).catch( (err) => {
56
+      }).catch((err) => {
62 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 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 67
       xhr.withCredentials = true;
72 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 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 79
       xhr.send(fd)
78 80
       xhr.onreadystatechange = function () {
79 81
         if (xhr.readyState === 4) {
80 82
           let obj = JSON.parse(xhr.responseText)
81 83
           if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
82 84
             resolve({
83
-              code: UPLOAD_SUCCESS_CODE,
85
+              code: Constants.UPLOAD_SUCCESS_CODE,
84 86
               url: obj.url,
85 87
               msg: 'success'
86 88
             })
87 89
           } else {
88 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,42 +98,48 @@ export default function UploadSdk(host, origin, token, file) {
96 98
     })
97 99
   }
98 100
 
99
-  this.postImage = function(md5,fileFactory) {
101
+  this.postImage = function (md5, fileFactory) {
100 102
     const self = this
101 103
     return new Promise((resolve, reject) => {
102 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 112
       xhr.withCredentials = true
105 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 121
       let fd = new FormData()
114
-      fd.append('file',this.file)
122
+      fd.append('file', this.file)
115 123
       xhr.send(fd)
116 124
       xhr.onreadystatechange = function () {
117 125
         if (xhr.readyState === 4) {
118 126
           let obj = JSON.parse(xhr.responseText)
119 127
           if (xhr.status === 304 || (xhr.status >= 200 && xhr.status < 300)) {
120
-            
121
-            if(obj.status === 1) {
128
+
129
+            if (obj.status === 1) {
122 130
               resolve({
123
-                code: UPLOAD_SUCCESS_CODE,
131
+                code: Constants.UPLOAD_SUCCESS_CODE,
124 132
                 url: obj.url,
125 133
                 msg: 'success'
126 134
               })
127 135
             } else if (obj.status === 0) {
128 136
               fileFactory.setOffset(obj.msg)
129
-              this.getAllResponseHeaders.postImage(md5,fileFactory)
137
+              this.getAllResponseHeaders.postImage(md5, fileFactory)
130 138
             }
131 139
           } else {
132 140
             reject({
133
-              code: UPLOAD_FAILED_CODE,
134
-              url:'',
141
+              code: Constants.UPLOAD_FAILED_CODE,
142
+              url: '',
135 143
               msg: obj.message
136 144
             })
137 145
           }
@@ -139,4 +147,24 @@ export default function UploadSdk(host, origin, token, file) {
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

@@ -0,0 +1,8 @@
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,6 +1,6 @@
1 1
 import SparkMD5 from 'spark-md5'
2 2
 
3
-export function getFilemd5sum(ofile) {
3
+export default function getFilemd5sum(ofile) {
4 4
     return new Promise((resolve, reject) => {
5 5
         let file = ofile;
6 6
         let tmp_md5;