fetch在ie11浏览器上传文件

实现一个大文件分片上传的功能，仅支持单个文件的分片逐一上传，对上传的文件没有大小限制，但上传速度没有过互联网的测验，本地测验，上传速度约等于本地文件拷贝速度，有很多弊端，但可满足基本的大文件分片上传功能。

本文仅为前端vue，如需后台java，请移步我的另一篇文章：大文件分片上传的后台方法（Java）

1 HTML部分

没啥可说的，使用Element-ui的<el-upload>标签，上代码

1.1 实现文件的选择与上传（使用Element-ui的<el-upload>标签）

<template>

<div>

<el-upload

:accept="accept"

:auto-upload="auotUpload"

action=""

:multiple="multiple"

:http-request="prepareUpload"

>

</el-upload>

</div>

</template>

登录后复制

1.2 实现文件上传的一个进度条（使用Element-ui的<el-progress>标签）

<template>

<div>

<el-card style="margin-top:2pxmargin-lift:2%margin-right:2%；height:40px" >

<div style="margin-top:4pxmargin-lift:2%">

<el-row>

<el-col :span="8">

<div style="margin-top:8pxmargin-lift:2%">{{fileInfo.fileName}}</div>

</el-col>

<el-col :span="8">

<div style="margin-top:8pxmargin-lift:2%">

<el-progress :percentage="percentage" type="line" :text-inside="true" :stroke-width="strokeWidth" :status="status"/>

</div>

</el-col>

<el-col :span="3">

<div style="margin-top:8pxmargin-lift:2%">{{fileInfo.fileName}}/{{fileInfo.allNum}}Mb</div>

</el-col>

<el-col :span="5">

<el-button type="text" @click="usable=1">暂停</div>

<el-button type="text" @click="prepareUpload(0)">继续</div>

</el-col>

</el-row>

</div>

</el-card>

</div>

</template>

登录后复制

2 JavaScript部分

2.1 参数部分

data(){

return:{

//文件参数

fileInfo:{

md:"", //文件唯一标识码，类似MD5，如果拥有MD5技术可以替换为MD5

allNum:"", //文件分片后的全部分片数量

successNum:"", //上传成功的分片文件数量

fileName:"", //文件名

detail:"", //文件描述

path:"", //文件存储路径

type:0, //文件状态，0为未上传完成，1为上传完成，用于查询时是否展示

parentId:"", //文件类型的父类，用于查询时是否展示

fileTypeId:"" //文件类型，用于查询时是否展示

}，

SIZE:1024*1024, //控制单个分片文件的大小

//以下为`el-upload`标签使用的参数

accept:"", //控制默认选择的文件类型

autoUpload:true, //是否在选择文件后自动开始上传文件

uploadURL:"", //文件上传地址这里为空，因为不需要使用这个参数，但是必须有

baseURL:"", //文件上传地址的根地址，后边方法中会拼接完成完整的地址，根地址一般为：http：//127.0.0.1:8080/demo/......

limit:1, //支持同时上传的文件数量

multiple:false, //是否支持文件多选

showFileList:false, //是否显示文件列表

file:"", //上传文件列表

//以下为进度条组件所用参数

strokeEidth:12, //进度条的高度

percentage:0, //进度条百分比

sataus:"exception", //进度条状态

//以下用于控制文件上传功能是否开启

usable=1

}

}

登录后复制

2.2 方法部分

2.2.1 开始上传之前的验证方法

prepareUpload(params){ //准备开始上传

//这里检查是否有文件正在上传，如果上传开始，则usable会被修改为0

if(this.usable===0){return this.$message({message:"当前正在执行文件上传任务，请在当前任务结束后再启动次功能",type="warning"})}

let file=params.file

//这里判断该方法是通过哪里调用的，

//如果是通过选择文件调用，则params!==0，则将文件保存到this.file

//如果是通过继续按钮调用，则params===0，则取用this.file继续执行文件上传

if(params===0){

//这里判断一下是否真的有文件在上传，如果没有，则退出任务

if(this.file===""){return this.$message({message:"当前暂无任务，无法继续",type="warning"})}

file=this.file

this.$message({message:"文件开始继续上传",type="success"})

}else{

file=params.file

this.file=params.file

}

//这里验证文件类型，可以根据自己需要进行验证，这里验证是否为zip或rar文件，如果不是则不允许上传

if(!(file.name.substring(file.name.length-4)===".zip"||!(file.name.substring(file.name.length-4)===".rar"){

return this.$message({message:"请选择zip或rar文件",type="warning"})

}

//这里验证文件大小，可自行修改限制

if(file.size>1024*1024*1024*3){return this.$message({message:"您无法选择一个大于3GB的文件",type="warning"})}

if(file.size<=0){return this.$message({message:"您无法选择一个大于大小为0的文件",type="warning"})}

//开始执行文件上传的前置 *** 作，将usable修改为0

this.usable=0

//修改文件名，用于文件下载时的为文件重命名后带有文件后缀，避免文件无法打开问题

if(this.fileInfo.fileName===""){

this.fileInfo.fileName=file.name

}else{

const a=this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)

if(!(this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)===".7z"||

this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)==="zip"||

this.fileInfo.fileName.substring(this.fileInfo.fileName.length-3)==="rar"||)

){

if(fileName.substring(file.name.length-3)===".7z"){

this.fileInfo.fileName+=file.name.substring(file.name.length-3)

}else{

this.fileInfo.fileName+=file.name.substring(file.name.length-4)

}

}

this.getMD5(file) //自己写的一个简易版计算文件唯一标识码，具体介绍在方法中有

this.getFileChunk(file) //获取文件分片集合，用于逐一上传

//这里写一个请求，用于判断文件是否已经上传，判断文件的状态是否已经上传完成

//这里请求方法请使用自己的，我是自己封装的请求方法

el.post("请求地址"，this.fileInfo).then((result)=>result.json()).then((result)=>{

this.getResult(result) //因为很多地方需要写同样的内容，就封装了一个方法来将返回值存储起来

//判断一下文件状态，如果为1则表示服务器中存在与该文件相同的文件，则无需再次上传，执行秒传,否则继续执行

if(result.result.type===1){

//执行秒传时需要对数据库进行写入新文件名的 *** 作，所以还需要一个请求来完成

el.post("请求地址"，this.fileInfo).then((result)=>result.json()).then((result)=>{

if(result.result.type===1){return this.$message({message:"秒传成功"，type:"success"})

}

}else{

this.beforeUpload() //如果文件没有秒传则调用上传之前的方法

}

}

}

登录后复制

2.2.2 开始上传文件

开始上传之前

beforeUpload(){

//循环调用该方法，实现对fileList的逐一上传，该方法主要为避免vue的异步执行导致逻辑错误

//实现方式为通过成功上传次数与总分片数量比较判断何时return

//成功上传次数为后台返回，所以js无需做次数递增，判断依据为this.fileInfo.successNum

this.beginUpload() //调用开始文件上传方法

}

登录后复制

开始上传文件

beginUpload(){

//判断用户是否 *** 作了暂停按钮，如果是则终止任务

if(this.usable===1){return this.$message({message:"任务已暂停",type:"success"})}

//创建请求头

const headers=new Headers({'Csrf-Token':wind

fetch(url, optionObj) 的第一个参数是请求的URL，第二个参数是配置对象，用于定制HTTP请求。

HTTP请求的方法、标头、数据体都在配置对象里面进行配置，以下是一些实例：

如果表单里面有文件选择器，可以用前一个例子的写法，上传的文件包含在整个表单里面，一起提交。

另一种方法是用脚本添加文件，构造出一个表单，进行上传，请看下面的例子：

上传二进制文件时，不用修改标头的Content-Type，浏览器会自动设置。

fetch()也可以直接上传二进制数据，将 Blob 或 arrayBuffer 数据放在body属性里面。

fetch()请求的底层用的是 Request() 对象的接口，参数完全一样，因此上面的 API 也是Request()的 API。

以下是各个属性的介绍：

fetch()请求成功以后，得到的是一个 Response 对象。它对应服务器的 HTTP 回应。

Response 对象还有一个Response.headers属性，指向一个 Headers 对象，对应 HTTP 回应的所有标头。

以下方法是Headers对象提供的，用以 *** 作标头：

Response对象根据服务器返回的不同类型的数据，提供了不同的读取方法：

注意： 上面5个读取方法都是异步的，返回的都是 Promise 对象。必须等到异步 *** 作结束，才能得到服务器返回的完整数据。

fetch()请求发送以后，如果中途想要取消，需要使用AbortController对象：

1 .fetch支持通过数据流（Stream 对象）处理数据，可以分块读取，有利于提高网站性能表现，减少内存占用，对于请求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来。

2 .

1 .fetch使用promise,而不是回调函数

2 .fetch采用模块化设计,API分散在多个对象上.

3 .fetch通过数据流处理对象,可以分块读取,有利于提高网站性能表现,减少内存占用,对于请求大文件或者网速慢得场景相当有用

4 .XMLHttp对象不支持数据流,所有的数据必须存放在缓存里,不支持分块读取,必须等待全部拿到之后,在一次性吐出来

1 .fetch接收到的response是一个流对象,是服务器的回应

2 .fetch('url').then(response=>response.json())

3 .

4 .response包含的数据通过Stream接口异步读取,一些同步属性可以马上读取到

5 .可以读取到的同步属性

6 .headers属性:指向一个Header对象,对应HTTP回应的所有标头

7 .读取内容的方法:根据服务器返回的不同类型的数据,提供了不同的读取方法

1 .正常情况下,response对象只能被读取一次,读取一次就没了,因为他是流对象

2 .如果想要多次读取,需要创建Response对象的副本,实现多次读取

3 .现在可以多次读取了

const response1 = await fetch('flowers.jpg')

const response2 = response1.clone()

1 .返回一个ReadableStream对象,可以分块读取内容,让用户 *** 作

1 .fetch发出请求之后,只有网络错误,无法连接才会报错,其他任何情况都认为是请求成功

2 .服务器返回的状态码是4XX,5XX,fetch也不会报错,promise不会变为rejected状态

3 .只有通过Response.status属性,得到http回应的真实状态码,才能判断是否请求成功,还有一种就是判断response.ok是否为true

1 .第一个参数是url,第二个参数作为配置对象,定制发出的http请求

2 .POST请求

3 .不能通过headers设置的属性,Content-Length,Cookie,Host,是浏览器自动生成的

3 .提交表单

4 .上传文件,先不考虑.但是可以直接上传二进制文

1 .cache:指定如何处理缓存

2 .mode:指定请求的模式

3 .credentials:指定是否发送Cookie

4 .signal:指定一个AbortSignal实例,用于取消fetch请求

5 .keep-alive:页面卸载时,告诉浏览器在后台保持连接,继续发哦是那个数据

6 .redirect:指定http跳转的处理方法

7 .integrity:指定一个哈希值,用于检查HTTP回应传回的数据是否等于这个预先设定的哈希值

8 .referrerr:用于设定fetch请求的referer标头

9 .referrerPolicy:设定referer标头的规则

---