Blob对象、FormData对象

Blob对象

Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作

构造函数

Blob() 构造函数返回一个新的 Blob 对象。 blob的内容由参数数组中给出的值的串联组成。
语法：var aBlob = new Blob( array, options )

• array —— 一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8
• options —— 可以设置两个值。type：默认值为 “”，它代表了将会被放入到blob中的数组内容的MIME类型；endings，默认值为"transparent"，另一可选项为"native"，用于指定包含行结束符\n的字符串如何被写入。

Ex：

var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob

属性

• Blob.size（只读）—— Blob 对象中所包含数据的大小（字节）
• Blob.type（只读）—— 一个字符串，表明该 Blob 对象所包含数据的 MIME 类型。如果类型未知，则该值为空字符串。

方法

• Blob.slice([start[, end[, contentType]]]) —— 返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。

ps：slice() 方法原本接受 length 作为第二个参数，以表示复制到新 Blob 对象的字节数。如果设置的参数使 start + length 超出了源 Blob 对象的大小，则返回从开始到结尾的所有数据。

• Blob.stream() —— 返回一个能读取blob内容的 ReadableStream。
• Blob.text() —— 返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
• Blob.arrayBuffer() —— 返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer

通过Blob对象下载文件

if (res.type === 'application/json') {
//  返回后台错误信息
   var reader = new FileReader()
   reader.onload = function (event) {
     // 文件里的文本会在这里被打印出来
     console.log(event.target.result, reader.result)
     let fileJson = JSON.parse(reader.result)
     hideLoading()
     that.$message.error(fileJson.msg)
   }
   reader.readAsText(res)
 } else {
   var eleLink = document.createElement('a')
   var name = moment().format('YYYYMMDDHHmmss') + '.pdf'
   eleLink.download = name
   eleLink.style.display = 'none'
   // 字符内容转变成blob地址
   var blob = new Blob([res], { type: 'application/pdf;chartset=UTF-8' })
   eleLink.href = URL.createObjectURL(blob)
   // 触发点击
   document.body.appendChild(eleLink)
   eleLink.click()
   // 然后移除
   document.body.removeChild(eleLink)
 }

 
 

FormData对象

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，如果送出时的编码类型被设为 “multipart/form-data”，它会使用和表单一样的格式。

构造函数

FormData() —— FormData()构造函数用于创建一个新的FormData对象。

方法

• FormData.append() —— 向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。
• FormData.set() —— 给 FormData 设置属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。
• FormData.delete() —— 从 FormData 对象里面删除一个键值对。
• FormData.get() —— 返回在 FormData 对象中与给定键关联的第一个值。
• FormData.getAll() —— 返回一个包含 FormData 对象中与给定键关联的所有值的数组。
• FormData.has() —— 返回一个布尔值表明 FormData 对象是否包含某些键。
• FormData.keys() —— 返回一个包含所有键的iterator对象。
• FormData.values() —— 返回一个包含所有值的iterator对象。
• FormData.entries() —— 返回一个包含所有键值对的iterator对象。

 
 

FormData数据中添加json格式数据

var formData = new FormData()
formData.append('matAttachInfo', new Blob([JSON.stringify(this.infoData)], { type: 'application/json' }))

FormData数据中添加文件

可循环添加

var formData = new FormData()
formData.append('csvFile', file[0])

FormData数据中添加键值对

var formData = new FormData()
formData.append(keyName, value)

其中matAttachInfo、csvFile以及keyName都是需要和后端约定好的变量名定义

当通过FormData进行包含文件(图片、MP3、文件等)上传操作时，需要将请求头的Content-Type属性设置为multipart/form-data

return axios({
  url: ,
  method: 'post',
  data: parameter,
  headers: {
    'Content-Type': 'multipart/form-data'
  },
  timeout: 500000
})

 
 
参考
https://developer.mozilla.org/zh-CN/docs/Web/API