更新2.0版本

2.xSrc/http.js

@@ -7,14 +7,48 @@
  * Date: 2020/1/4
  * Time: 3:40 下午
  */
-
+import Tool from './tool';
 
 class Http {
-  constructor() {
+  constructor(options) {
+    this.url = options.url;
+    this.formData = Tool.deepClone(options.formData, {});
+    this.header = Tool.deepClone(options.header || {}, {});
+    this.file = options.file || {fieldName: String, fileBlob: Object, fileName: String};
+    this.delay = options.delay;
   }
-
 
+  request(callBack) {
+    let xhr = new XMLHttpRequest();
+    let formData = new FormData();
+    xhr.open('post', this.url, true);
+    // 循环追加请求头
+    for (let key in this.header) {
+      if (this.header.hasOwnProperty(key)) {
+        xhr.setRequestHeader(key, this.header[key]);
+      }
+    }
+    // 循环追加数据
+    for (let key in this.formData) {
+      if (this.formData.hasOwnProperty(key)) {
+        formData.append(key, this.formData[key]);
+      }
+    }
 
+    // 追加文件
+    formData.append(this.file.fieldName, this.file.fileBlob, this.file.fileName);
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4) {
+        callBack.response(xhr);
+      }
+    };
+    xhr.upload.onprogress = (evt) => {
+      if (evt.lengthComputable) {
+        callBack.progress(evt.loaded, evt.total);
+      }
+    };
+    xhr.send(formData);
+  }
 
 }
 

2.xSrc/index.js

@@ -8,8 +8,6 @@
  * Time: 3:32 下午
  */
 
-
-
 import UploadFile from './upload';
 
 module.exports = UploadFile;

2.xSrc/slice.js

@@ -0,0 +1,94 @@
+class Slice {
+
+
+  constructor(options) {
+    // 文件
+    this.file = options.file;
+    // 文件大小
+    this.totalSize = this.file.size;
+    // 切片大小
+    this.chunkSile = options.chunkSile * 1024 * 1024;
+    // 需要传输几次
+    this.chunkLength = 0;
+    // 切片集合
+    this.slices = [];
+    // 切片开始位置
+    this.start = 0;
+    // 切片结束位置
+    this.end = 0;
+    this._compute();
+  }
+
+
+  /**
+   * @description 计算总共需要传输几次
+   * @return {Object} this
+   * */
+  _compute() {
+    // console.log('文件总大小' + this.totalSize);
+    if (this.totalSize <= this.chunkSile) {
+      this.chunkLength = 1;
+    } else {
+      this.chunkLength = Math.ceil(this.totalSize / this.chunkSile);
+    }
+    // console.log(this.chunkLength);
+  }
+
+  /**
+   * @description 获取该文件对象所以切片
+   * @return {Array} 切片集合
+   * */
+  getSlice() {
+    if (this.slices.length !== 0) {
+      return this.slices;
+    }
+    for (let i = 1; i <= this.chunkLength; i++) {
+      // 如果是总共传输一次或者最后一次
+      if (i === this.chunkLength || this.chunkLength === 1) {
+        this.end = this.totalSize;
+      } else {
+        this.end = i * this.chunkSile;
+      }
+      // 剪切文件
+      let blob = this.file.slice(this.start, this.end);
+      this.slices.push({
+        blob,
+        order: i,
+        size: blob.size,
+        start: this.start,
+        end: this.end
+      });
+      this.start = this.end;
+    }
+    return this.slices;
+  }
+
+
+  /**
+   * @description 获取当前文件对象的大小
+   * @return {Number}
+   * */
+  getSize() {
+    return this.totalSize;
+  }
+
+  /**
+   * @description 获取当前文件切片块数
+   * @return {Number}
+   * */
+  getChunkLength() {
+    return this.chunkLength;
+  }
+
+
+}
+
+export default Slice;
+
+
+
+
+
+
+
+

2.xSrc/tool.js

@@ -0,0 +1,72 @@
+class Tool {
+  /**
+   * @description 生成随机字符串
+   * @return {String}
+   * */
+  static makeRandom() {
+    let keys = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let maxPos = keys.length;
+    let str = '';
+    for (let i = 0; i < 20; i++) {
+      str += keys.charAt(Math.floor(Math.random() * maxPos));
+    }
+    return str + new Date().getTime();
+
+  }
+
+  /**
+   * @description 获取文件名后缀
+   * @return {String} 文件名称
+   * @return {String}
+   * */
+  static getFileNameSuffix(fileName) {
+    return fileName.split('.').pop();
+  }
+
+  /**
+   * @description 将queryString解析成对象
+   * @return {String} queryString
+   * @return {Object} 转换之后的对象
+   * */
+  static queryStringToObj(query) {
+    let reg = /([^=&\s]+)[=\s]*([^&\s]*)/g;
+    let obj = {};
+    while (reg.exec(query)) {
+      obj[RegExp.$1] = RegExp.$2;
+    }
+    return obj;
+  }
+
+  static deepClone(origin, target) {
+    for (let prop in origin) {
+      if (origin.hasOwnProperty(prop)) {
+        //判断是原始值还是引用值 并且不包含null(null其实是原始值，但是typeof返回是'object')
+        if (typeof origin[prop] === 'object' && Object.prototype.toString.call(origin[prop]) !== '[object Null]') {
+          //判断原始值是对象还是数组
+          target[prop] = Object.prototype.toString.call(origin[prop]) === '[object Array]' ? [] : {};
+          Tool.deepClone(origin[prop], target[prop]);
+        } else {
+          //string null undefined number
+          target[prop] = origin[prop];
+        }
+      }
+    }
+    return target;
+  }
+}
+
+
+export default Tool;
+
+
+
+
+
+
+
+
+
+
+
+
+