1

2

3

4

5

6

7

8

9

10

11

12

13

var data1 = "a";

var blob1 = new Blob([data1]);

console.log(blob1); //输出：Blob {size: 1, type: ""}

var debug = {hello: "world"};

var blob = new Blob([JSON.stringify(debug, null, 2)],{type : 'application/json'});

console.log(blob) // 输出 Blob(22) {size: 22, type: "application/json"}

// 创建一个8字节的ArrayBuffer，在其上创建一个每个数组元素为2字节的“视图”

var abf = new ArrayBuffer(8)

var abv = new Int16Array(abf)

var bolb_ArrayBuffer = new Blob(abv, {type : 'text/plain'})

console.log(bolb_ArrayBuffer) //输出 Blob(4) {size: 4, type: "text/plain"}

1

slice(start, end, contentType)

1

2

3

4

5

6

var data = "abcdef";

var blob1 = new Blob([data]);

var blob2 = blob1.slice(0,3);

console.log(blob1); //输出：Blob {size: 6, type: ""}

console.log(blob2); //输出：Blob {size: 3, type: ""}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

initUpload();

//初始化上传

function initUpload() {

 var chunk = 100 * 1024; //每片大小

 var input = document.getElementById("file"); //input file

 input.onchange = function (e) {

  var file = this.files[0];

  var query = {};

  var chunks = [];

  if (!!file) {

   var start = 0;

   //文件分片

   for (var i = 0; i < Math.ceil(file.size / chunk); i++) {

    var end = start + chunk;

    chunks[i] = file.slice(start , end);

    start = end;

   }

   // 采用post方法上传文件

   // url query上拼接以下参数，用于记录上传偏移

   // post body中存放本次要上传的二进制数据

   query = {

    fileSize: file.size,

    dataSize: chunk,

    nextOffset: 0

   }

   upload(chunks, query, successPerUpload);

  }

 }

}

// 执行上传

function upload(chunks, query, cb) {

 var queryStr = Object.getOwnPropertyNames(query).map(key => {

  return key + "=" + query[key];

 }).join("&");

 var xhr = new XMLHttpRequest();

 xhr.open("POST", "http://xxxx/opload?" + queryStr);

 xhr.overrideMimeType("application/octet-stream");

 //获取post body中二进制数据

 var index = Math.floor(query.nextOffset / query.dataSize);

 getFileBinary(chunks[index], function (binary) {

  if (xhr.sendAsBinary) {

   xhr.sendAsBinary(binary);

  } else {

   xhr.send(binary);

  }

 });

 xhr.onreadystatechange = function (e) {

  if (xhr.readyState === 4) {

   if (xhr.status === 200) {

    var resp = JSON.parse(xhr.responseText);

    // 接口返回nextoffset

    // resp = {

    //  isFinish:false,

    //  offset:100*1024

    // }

    if (typeof cb === "function") {

     cb.call(this, resp, chunks, query)

    }

   }

  }

 }

}

// 每片上传成功后执行

function successPerUpload(resp, chunks, query) {

 if (resp.isFinish === true) {

  alert("上传成功");

 } else {

  //未上传完毕

  query.offset = resp.offset;

  upload(chunks, query, successPerUpload);

 }

}

// 获取文件二进制数据

function getFileBinary(file, cb) {

 var reader = new FileReader();

 reader.readAsArrayBuffer(file);

 reader.onload = function (e) {

  if (typeof cb === "function") {

   cb.call(this, this.result);

  }

 }

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

// file是要下载的文件（blob对象）

downloadHandler: function (file, fileName) {

 let link = document.createElement('a')

 link.href = window.URL.createObjectURL(file)

 link.download = fileName

 link.click()

 window.URL.revokeObjectURL(link.href)

 if (navigator.userAgent.indexOf('Firefox') > -1) {

 const a = document.createElement('a')

 a.addEventListener('click', function (e) {

  a.download = fileName

  a.href = URL.createObjectURL(file)

 })

 let e = document.createEvent('MouseEvents')

 e.initEvent('click', false, false)

 a.dispatchEvent(e)

 }

}

1

2

var x = new XMLHttpRequest();

x.responseType = 'blob';  // 返回一个blob对象