web API：FileReader、URL【window.URL.createObjectURL()】、HTMLImageElement【new Image()】、Fetch()、window

web API

1、FileReader

前言

FileReader是一种异步文件读取机制，结合input:file可以很方便的读取本地文件。

构造函数

new FileReader()

属性

属性	描述
`error`（只读）	一个DOMException（异常），表示在读取文件时发生的错误。
`readyState`（只读）	表示FileReader状态的数字，取值如下表。
★`result`（只读）	文件的内容。该属性仅在读取操作完成后才有效，数据的格式取决于使用哪个方法来启动读取操作。

`readyState`状态的属性

常量名	值	描述
`EMPTY`	0	还没有加载任何数据。
`LOADING`	1	数据正在被加载。
`DONE`	2	已完成全部的读取请求。

方法

方法	描述
`abort():void`	中止读取操作。在返回时，readyState属性为DONE
`readAsArrayBuffer(file):void`	读取文件后，result 属性中保存的是被读取文件的 ArrayBuffer 数据对象。
`readAsBinaryString(file):void`	读取文件后，result属性中包含所读取文件的原始二进制数据。
★`readAsDataURL(file):void`	读取文件后，result属性中将包含一个data: URL 格式的 Base64 字符串以表示所读取文件的内容。
★`readAsText(file):void`	读取文件后，result属性中将包含一个字符串以表示所读取的文件内容。

事件

事件名称	描述
`onabort`	当读取操作被中止时调用
`onerror`	当读取操作发生错误时调用
★`onload`	当读取操作成功完成时调用
`onloadend`	当读取操作完成时调用,不管是成功还是失败
`onloadstart`	当读取操作将要开始之前调用
`onprogress`	在读取数据过程中周期性调用

注意：文件一旦开始读取，无论成功或失败，实例的 result 属性都会被填充。如果读取失败，则 result 的值为 null ，否则即是读取的结果，绝大多数的程序都会在成功读取文件的时候，抓取这个值。

案例

读取txt文件

<template>
  <div class="emqrcode">
    <a-upload :file-list="fileList" :before-upload="beforeUpload">
      <a-button> <a-icon type="upload" /> Select File </a-button>
    </a-upload>
    <div>------------------------------</div>
    <div ref="div"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      console.log(file, '上传的文件')
      const reader = new FileReader()
      reader.readAsText(file, 'utf8') // file文件
      reader.onload = (e) => {
        console.log(e, '读取文件成功的e')
        const data = e.target.result
        this.$refs.div.innerHTML += data // reader.result和e.target.result是一个东西
        // this.$refs.div.innerHTML += reader.result // reader.result为获取结果
      }
      return false
    }
  }
}
</script>

<style lang="less"></style>

读取Excel文件（结合xlsx.js使用）

<template>
  <div class="emqrcode">
    <a-upload :file-list="fileList" :before-upload="beforeUpload">
      <a-button> <a-icon type="upload" /> Select File </a-button>
    </a-upload>
    <div>------------------------------</div>
    <div ref="div"></div>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    file2Xce (file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        // 读取为二进制字符串
        reader.readAsBinaryString(file)
        reader.onload = function (e) {
          const data = e.target.result
          // XLSX.read解析数据，按照type 的类型解析
          this.wb = XLSX.read(data, {
            type: 'binary' // 二进制
          })
          console.log(this.wb, '---->解析后的数据')
          const result = []
          // 工作表名称的有序列表
          console.log(this.wb.SheetNames, '---->工作表名称数组')
          this.wb.SheetNames.forEach(sheetName => {
            result.push({
              // 工作表名称
              sheetName: sheetName,
              // 包含表数据的 数组（数据导出）
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName]) // this.wb.Sheets[sheetName]单工作表文件的第一个工作表
            })
          })
          console.log(result, '----->表数据的数组')
          resolve(result)
        }
      })
    },
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      console.log(file, '上传的文件')
      console.log(file.raw)
      this.file2Xce(file).then((res) => {
        console.log(res, 'resolve结果')
        console.log('可以继续对res数据进行二次处理')
        // 整理数据格式，只保留x和y
        // if (xyToFormat(res)) {
        //   this.resList = xyToFormat(res)
        //   this.$emit('excelBeforeUploadEmit', file, this.resList)
        // } else {
        //   this.resList = []
        // }
      })
      return false
    }
  }
}
</script>

<style lang="less"></style>

附sheetjs官网

https://docs.sheetjs.com/docs/

读取图片文件（也可以实现图片预览）

<template>
  <div class="emqrcode">
    <a-upload :file-list="fileList" :before-upload="beforeUpload">
      <a-button> <a-icon type="upload" /> Select File </a-button>
    </a-upload>
    <div>------------------------------</div>
    <div ref="div"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      console.log(file, '上传的文件')
      const reader = new FileReader()
      reader.readAsDataURL(file) // 读取图片
      reader.onload = (e) => {
        console.log(e, '读取文件成功的e')
        const img = new Image()
        img.src = reader.result
        console.log(reader.result, '----->data: URL 格式的 Base64 字符串')
        this.$refs.div.appendChild(img)
      }
      return false
    }
  }
}
</script>

<style lang="less"></style>

2、URL

前言

一般使用window.URL.createObjectURL()方法比较多，主要用于获取文件对应的url

注：加不加window.一般情况下没区别.

如果浏览器尚不支持URL()构造函数，则可以使用Window中的Window.URL (en-US)属性。

构造函数

new URL()

属性

属性	描述
`hash`	从#开始往后的所有信息
`host`	域名+端口
`hostname`	域名
`href`	完整 URL
`pathname`	端口之后，以 ‘/’ 起头，#之前的文件路径
`search`	指示 URL 的参数字符串；如果提供了任何参数，则此字符串包括所有参数，并以开头的“？”开头字符。

方法

方法	描述
`toString()`	返回包含整个 URL字符串，它是URL.href的同义词，尽管它不能用于修改值。
`toJSON()`	返回包含整个 URL 的字符串。它返回与href属性相同的字符串。

静态方法

方法	描述
`createObjectURL()`	返回一个字符串，包含一个唯一的 blob 链接（该链接协议为以 blob:，后跟唯一标识浏览器中的对象的掩码）
`revokeObjectURL()`	销毁之前使用URL.createObjectURL()方法创建的 URL 实例。

案例

基本使用

<template>
  <div class="emqrcode">
    <a-upload :file-list="fileList" :before-upload="beforeUpload">
      <a-button> <a-icon type="upload" /> Select File </a-button>
    </a-upload>
    <div>------------------------------</div>
    <div ref="div"></div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload (file) {
      // 属性
      // 当前窗口的url：http://192.168.31.162:48079/historycity/#/test?pic=1
      const url = new URL(window.location.href) // window.location.href当前窗口的url
      console.log(url) // url对象
      console.log(url.hash) // #/test?pic=1
      console.log(url.host) // 192.168.31.162:48079
      console.log(url.hostname) // 192.168.31.162
      console.log(url.href) // http://192.168.31.162:48079/historycity/#/test?pic=1
      console.log(url.pathname) // /historycity/
      console.log(url.search)
      console.log(url.searchParams)
      console.log(url.toString()) // /historycity/
      console.log(url.toJSON()) // /historycity/
      return false
    }
  }
}
</script>

<style lang="less"></style>

实现图片预览

<template>
  <div class="emqrcode">
    <a-upload :file-list="fileList" :before-upload="beforeUpload">
      <a-button> <a-icon type="upload" /> Select File </a-button>
    </a-upload>
    <div>------------------------------</div>
    <div ref="div"></div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      const fileurl = window.URL.createObjectURL(file)
      console.log(fileurl) // blob:http://192.168.31.162:48079/b7af9406-fad8-4f05-8b7c-32c10a3fef58

      const img = new Image()
      img.src = fileurl
      this.$refs.div.appendChild(img)
      return false
    }
  }
}
</script>

<style lang="less"></style>

3、HTMLImageElement（new Image()）

前言

一般用new Image(width，height)生成<img/>标签，结合图片预览使用

构造函数

new Image([width，height])创建了一个尚未被插入 DOM 树中的 HTMLImageElement 实例。

属性

属性	描述
`alt`	表明图像的后备描述内容，会在图像无法加载时显示
`src`	包含图像的完整的 URL，包含图像的基础 URL

方法

方法	描述
`decode()`	返回一个当图片解码后可安全用于附加到 DOM 上时 resolves 的 Promise 对象。

案例

结合图片预览使用

<template>
  <div class="emqrcode">
    <a-upload :file-list="fileList" :before-upload="beforeUpload">
      <a-button> <a-icon type="upload" /> Select File </a-button>
    </a-upload>
    <div>------------------------------</div>
    <div ref="div"></div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      const fileurl = window.URL.createObjectURL(file)
      console.log(fileurl) // blob:http://192.168.31.162:48079/b7af9406-fad8-4f05-8b7c-32c10a3fef58

      const img = new Image()
      img.src = fileurl
      this.$refs.div.appendChild(img)
      return false
    }
  }
}
</script>

<style lang="less"></style>

decode()的使用（使用场景：加载大图片时替换）

一个 decode() 的潜在用例：当在加载一个非常大的图片时（例如，一个在线相册），你可以在加载初期提供一个低分辨率的缩略图，之后通过实例化一个 HTMLImageElement 将该图像替换为一个全分辨率图像，设置其 source 为全分辨率图像 URL，使用 decode() 获取一旦全分辨率图像准备好被使用时 resolved 的 promise 对象。这时你可以使用当前可用的全分辨率图像替换之前的低分辨率图像。

<template>
  <div class="emqrcode">
    <a-upload :file-list="fileList" :before-upload="beforeUpload">
      <a-button> <a-icon type="upload" /> Select File </a-button>
    </a-upload>
    <div>------------------------------</div>
    <div ref="div"></div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      const fileurl = window.URL.createObjectURL(file)

      const img = new Image()
      img.src = fileurl
      img.decode()
        .then(() => {
          this.$refs.div.appendChild(img)
        })
        .catch((encodingError) => {
          // Do something with the error.
        })

      return false
    }
  }
}
</script>

<style lang="less"></style>

4、Fetch()–代替XMLHttpRequest

前言

全局的 fetch() 方法用于发起获取资源的请求（用于取代传统的XMLHttpRequest的）。返回一个Promise对象。

语法

fetch(input[, init])

参数

input:定义要获取的资源

一个要获取资源的 URL。一些浏览器会接受 blob: 和 data:

一个 Request 对象。

init :一个配置项对象，包括所有对请求的设置（跟Request() 对象的接口一致）

const response = fetch(url, {
  method: "GET",
  headers: {
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,
  referrer: "about:client",
  referrerPolicy: "no-referrer-when-downgrade",
  mode: "cors", 
  credentials: "same-origin",
  cache: "default",
  redirect: "follow",
  integrity: "",
  keepalive: false,
  signal: undefined
});

method：HTTP 请求的方法，POST、DELETE、PUT都在这个属性设置。

headers：一个对象，用来定制 HTTP 请求的标头。

body：POST 请求的数据体。

cache：指定如何处理缓存。可能的取值如下：
/*
	default：默认值，先在缓存里面寻找匹配的请求。
	no-store：直接请求远程服务器，并且不更新缓存。
	reload：直接请求远程服务器，并且更新缓存。
	no-cache：将服务器资源跟本地缓存进行比较，有新的版本才使用服务器资源，否则使用缓存。
	force-cache：缓存优先，只有不存在缓存的情况下，才请求远程服务器。
	only-if-cached：只检查缓存，如果缓存里面不存在，将返回504错误。
*/
mode: 指定请求的模式。可能的取值如下：
/*
	cors：默认值，允许跨域请求。
	same-origin：只允许同源请求。
	no-cors：请求方法只限于 GET、POST 和 HEAD，并且只能使用有限的几个简单标头，不能添加跨域的复杂标头，相当于提交表单所能发出的请求。
*/
credentials：指定是否发送 Cookie。可能的取值如下：
/*
	same-origin：默认值，同源请求时发送 Cookie，跨域请求时不发送。
	include：不管同源请求，还是跨域请求，一律发送 Cookie。
	omit：一律不发送。
*/
signal：指定一个 AbortSignal 实例，用于取消fetch()请求

keepalive：用于页面卸载时，告诉浏览器在后台保持连接，继续发送数据。
/*
一个典型的场景就是，用户离开网页时，脚本向服务器提交一些用户行为的统计信息。
这时，如果不用keepalive属性，数据可能无法发送，因为浏览器已经把页面卸载了。
*/
redirect: 指定 HTTP 跳转的处理方法。可能的取值如下：
/*
	follow：默认值，fetch()跟随 HTTP 跳转。
	error：如果发生跳转，fetch()就报错。
	manual：fetch()不跟随 HTTP 跳转，但是response.url属性会指向新的 URL，response.redirected属性会变为true，由开发者自己决定后续如何处理跳转。
*/
integrity：指定一个哈希值，用于检查 HTTP 回应传回的数据是否等于这个预先设定的哈希值。
/*
比如，下载文件时，检查文件的 SHA-256 哈希值是否相符，确保没有被篡改
fetch('http://site.com/file', {
  integrity: 'sha256-abcdef'
});
*/
referrer: 用于设定fetch请求的referer标头。
/*
这个属性可以为任意字符串，也可以设为空字符串（即不发送referer标头）。
*/
referrerPolicy: 用于设定Referer标头的规则。可能的取值如下：
/*
	no-referrer-when-downgrade：默认值，总是发送Referer标头，除非从 HTTPS 页面请求 HTTP 资源时不发送。
	no-referrer：不发送Referer标头。
	origin：Referer标头只包含域名，不包含完整的路径。
	origin-when-cross-origin：同源请求Referer标头包含完整的路径，跨域请求只包含域名。
	same-origin：跨域请求不发送Referer，同源请求发送。
	strict-origin：Referer标头只包含域名，HTTPS 页面请求 HTTP 资源时不发送Referer标头。
	strict-origin-when-cross-origin：同源请求时Referer标头包含完整路径，跨域请求时只包含域名，HTTPS 页面请求 HTTP 资源时不发送该标头。
	unsafe-url：不管什么情况，总是发送Referer标头。
*/

返回值

Promise，resolve 时回传 Response 对象。

Response 对象

1、同步属性

fetch()请求成功返回Promise，Promise调用then方法得到一个 Response 对象。它对应服务器的 HTTP 回应。
Response 包含的数据通过 Stream 接口异步读取，但是它还包含一些同步属性，对应 HTTP 回应的标头信息（Headers），可以立即读取。
标头信息属性有下面这些：

const myPromise = fetch('https://api.github.com/users/ruanyf')
myPromise.then(response => {
  console.log(response, '------->response对象')
})

1. response.ok：返回一个布尔值，表示请求是否成功
例如：true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。

2. response.status：返回一个数字，表示 HTTP 回应的状态码
例如：200，表示成功请求

3. response.statusText属性返回一个字符串，表示 HTTP 回应的状态信息
例如：请求成功以后，服务器返回"OK"

4. response.url：返回请求的 URL。
如果： URL 存在跳转，该属性返回的是最终 URL。

5. response.redirected：返回一个布尔值，表示请求是否发生过跳转。

6. response.type：返回请求的类型。可能的值如下：
basic：普通请求，即同源请求。
cors：跨域请求。
error：网络错误，主要用于 Service Worker。

2、判断请求

fetch()发出请求以后，只有网络错误或者无法连接时，fetch()才会报错，其他情况都不会报错，而是认为请求成功。
只有通过Response.status属性，得到 HTTP 回应的真实状态码，才能判断请求是否成功
另一种方法是判断response.ok是否为true

const myPromise = fetch('https://api.github.com/users/ruanyf')
myPromise.then(response => {
  console.log(response, '------->response')
  // 第一种方法
  if (response.ok) {
    console.log('状态成功-------> true对应 HTTP 请求的状态码 200 到 299，false对应其他的状态码。')
  }
  // 第二种方法
  if (response.status >= 200 && response.status < 300) {
    console.log('状态成功-------> status 对应 HTTP 的状态码')
  } else {
    console.log('状态失败-------> ')
  }
})

3、操作标头

Response 对象还有一个Response.headers属性，指向一个 Headers 对象，对应 HTTP 回应的所有标头。
Headers 对象可以使用for...of循环进行遍历

for (let [key, value] of response.headers) { 
  console.log(`${key} : ${value}`);  
}

提供了以下方法，用来操作标头。比较常用的也就是：response.headers.get()

response.headers.get()：根据指定的键名，返回键值。
response.headers.has()： 返回一个布尔值，表示是否包含某个标头。
response.headers.set()：将指定的键名设置为新的键值，如果该键名不存在则会添加。
response.headers.append()：添加标头。
response.headers.delete()：删除标头。
response.headers.keys()：返回一个遍历器，可以依次遍历所有键名。
response.headers.values()：返回一个遍历器，可以依次遍历所有键值。
response.headers.entries()：返回一个遍历器，可以依次遍历所有键值对（[key, value]）。
response.headers.forEach()：依次遍历标头，每个标头都会执行一次参数函数。

4、读取内容

Response对象根据服务器返回的不同类型的数据，提供了不同的读取方法。
下面5个读取方法都是异步的，返回的都是 Promise 对象。必须等到异步操作结束，才能得到服务器返回的完整数据。
Stream 对象只能读取一次，读取完就没了。这意味着五个读取方法，只能使用一个，否则会报错。

const myPromise = fetch('https://api.github.com/users/ruanyf')
myPromise.then(response => {
  console.log(response, '------->response')
  response.text() // 得到文本字符串，用于获取文本数据，比如 HTML 文件。
  response.json() // 得到 JSON 对象。
  response.blob() // 得到二进制 Blob 对象，例如读取图片文件，显示在网页上。
  response.formData() // 得到 FormData 表单对象，主要用在 Service Worker 里面，拦截用户提交的表单，修改某些数据以后，再提交给服务器。
  response.arrayBuffer() // 得到二进制 ArrayBuffer 对象，主要用于获取流媒体文件。
})

5、创建副本

Response 对象提供Response.clone()方法，创建Response对象的副本，实现多次读取。

const response1 = await fetch('flowers.jpg');
// response.clone()复制了一份 Response 对象，然后将同一张图片读取了两次
const response2 = response1.clone();

const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();

image1.src = URL.createObjectURL(myBlob1);
image2.src = URL.createObjectURL(myBlob2);

6、底层接口

Response.body属性是 Response 对象暴露出的底层接口，返回一个 ReadableStream 对象，供用户操作
例如：用来分块读取内容，显示下载的进度

const response = await fetch('flower.jpg');
// response.body.getReader()方法返回一个遍历器
const reader = response.body.getReader();

while(true) {
  // 这个遍历器的read()方法每次返回一个对象，表示本次读取的内容块
  const {done, value} = await reader.read();
  // done属性是一个布尔值，用来判断有没有读完
  if (done) {
    break;
  }
  // value属性是一个 arrayBuffer 数组，表示内容块的内容，而value.length属性是当前块的大小
  console.log(`Received ${value.length} bytes`)
}

案例

基本使用（实现图片下载，预览也可以的）

<template>
  <div class="emqrcode">
    <a-upload :file-list="fileList" :before-upload="beforeUpload">
      <a-button> <a-icon type="upload" /> Select File </a-button>
    </a-upload>
    <div>------------------------------</div>
    <div ref="div"></div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      fileList: []
    }
  },
  methods: {
    beforeUpload (file) {
      this.fileList = [...this.fileList, file]
      const url = window.URL.createObjectURL(file)
      console.log(url, '------->url')
      let link = document.createElement('a')

      fetch(url).then(response => {
        return response.blob()
      }).then(res => {
        console.log(res, '------->res')
        link.href = URL.createObjectURL(res)
        link.download = 'pic'
        document.body.appendChild(link)
        link.click()
      }).catch(err => {
        console.log(err, '------>Request Failed')
      })

      return false
    }
  }
}
</script>

<style lang="less"></style>