本文目录：
- 1、fetch在ie11浏览器上传文件
- 2、fetch基础以及实践以及结合useRequest实践
- 3、react-native——fetch
- 4、在实体机可以消费docker中fetch超时
- 5、fetch属于web api吗
- 6、fetch请求调试怎么重发
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
div
el-row
el-col :span="8"
div {{fileInfo.fileName}}/div
/el-col
el-col :span="8"
div
el-progress :percentage="percentage" type="line" :text-inside="true" :stroke-width="strokeWidth" :status="status"/
/div
/el-col
el-col :span="3"
div {{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.size1024*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基础以及实践以及结合useRequest实践
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标头的规则
react-native——fetch
fetch的入口函数定义在node_modules/whatwg-fetch.js文件中，如下
该函数在Network/fetch.js中被导出，最终在initializeCore.js中被注册为global的属性变为全局函数。fetch返回的是一个Promise。
跟随方法走向，依次调用的是XMLHttpRequest.js的send - RCTNetworking.ios.js的sendRequest - 最终调到原生端RCTNetworking.mm的sendRequest方法。
相关问题点：
1、为何fetch函数无法设置timeout？
为了设置fetch的timeout，我会如下定义一个函数
然后如下调用
先定义一个Promise，其在超时时间结束后reject。将这个Promise和fetch合并到Promise.race中，则一旦这两个请求谁先执行，另外一个会被舍弃。这样完成超时时间的设置。
但是查看源码发现oc中是有超时时间设置这个选项的，且js和oc通信时也传了这个参数，问题是出在入口函数fetch处，只需要在上面fetch方法中添加上如下
就可以在请求参数中设置超时时间了，如
2、fetch函数为何无法cancel？
fetch在原生端是NSURLSessionDataTask发的请求，这个是可取消的。在js端的XMLHttpRequest.js中也发现了abort方法，调用能够取消当前网络请求。问题出在了fetch的接口函数。
首先，要想请求能够取消，得拿到当前请求对应的requestId。请求的执行顺序是js端发起 - OC生成Request，得到requestId，利用NSURLSessionDataTask发起请求 - 将requestId通过回调的形式传回给js端，js若想取消该请求，执行abort方法即可。
要想fetch函数能够执行cancel，只需该方法将XMLHttpRequest对象返回即可。但是那样，就不再是一个Promise了。
也可以将cancel方法绑定到返回的Promise对象上，修改方法如下
如此，调用的时候就比较恶习了，要如下
不能fecth().then().then()的模式调用，因为这样会导致返回的那个Promise不再是上面绑定了cancel的那个Promise。
在实体机可以消费docker中fetch超时
1、超时原因
外部网站，国内访问时可能会超时
2、解决方法
修改Dockerfile，使用国内的alpine源
2.1、正确的做法
正确的做法是使用国内源完全覆盖 /etc/apk/repositories
在Dockerfile中增加下面的第二行
2.2、可能有问题的做法
追加国内源（echo后面双大于号），此时可能依然超时，因为默认的/etc/apk/repositories里面就有国外的源
追加方法
调试一下可以看到默认的国外源
在Dockerfile中增加一条命令
执行时可以看到全部的源
文章知识点与官方知识档案匹配
网络技能树首页概览
22502 人正在系统学习中
打开CSDN APP，看更多技术内容
最新发布 基于alpine进行dockerfile 构建时，修改apk源
这里提供一种在dockerfile中修改源的方法：在 RUN的第一步，先修改源，并使其生效。时，一直卡住，最后显示超时。这是因为众所周知的原因，只需修改apk的源即可。在基于alpine进行dockerfile 构建时，当进行到。
继续访问
docker Failed to fetch 或者 dockerfile: returned a non-zero code: 100
在使用docker 创建容器时出现的两个问题：docker Failed to fetch : returned a non-zero code: 100归根到底，就是拉取包时连接不稳定，容器内部apt-get 更新或者拉取包时实在太慢出现的错误问题解决：因为代码放在云服务器上，需要修改apt-get源变为对应的服务商的来加速例如，我的是放在腾讯云上，所以要修改为腾讯源一开始改为清华源和其他的加速源试了也都不行总结，如果是在云服务器上跑docke
继续访问
Docker/Podman使用提高----Dockerfile的制作基础及常见的问题
文章目录1.Dockerfile基础2.docker build 基础3.构建centos镜像:案例一4.修改后的案例一：5.CMD 与 ENTRYPOINT 的区别5.ADD 与 COPY 的区别6.常见问题1).fetch 超时问题2.启动容器后就直接停止了 1.Dockerfile基础 Dockerfile要点： 每个保留关键字（指令）都必须是大写字
继续访问
ERROR: : DNS lookup error
先说下笔者出现这个问题的场景： 1、内网ubuntu20.04，使用代理服务器进行上网 2、使用Dockerfile构建docker镜像 结果使用docker build -t xxx/xxx .构建docker镜像时，出现下面的错误： fetch ERROR: : DN
继续访问
构建docker镜像时ERROR: : network error
构建docker镜像时ERROR: : network error
继续访问
使用Alpine镜像构建镜像
一、alpine介绍 1、Alpine Linux是一个完整的操作系统，像其他操作系统一样，可以将Alpine安装到本地硬盘中，使用apk进行包管理。 包含了以下特点： 小巧：基于Musl libc和busybox，和busybox一样小巧，最小的Docker镜像只有5MB； 安全：面向安全的轻量发行版； 简单：提供APK包管理工具，软件的搜索、安装、删除、升级都非常方便。 适合容器使用：由...
继续访问
linux指令库 apk,alpine apk 包管理命令使用说明 详解（译至官方文档）
Packages and RepositoriesAlpine Linux的软件包是经过数字签名的tar.gz存档，包含程序，配置文件和依赖关系元数据。它们具有扩展名.apk，通常称为“a-packs”。包存储在一个或多个存储库中。存储库只是一个包含* .apk文件集合的目录。该目录必须包含一个名为APKINDEX.tar.gz的特殊索引文件，以将其视为存储库。该APK程序可以从多个仓库安装软件包...
继续访问
解决Docker构建时出现的 WARNING: Ignoring : Permission denied
解决Docker构建时出现的 WARNING: Ignoring : Permission denied 在根据官网的Docker-compose构建示例项目时遇到的问题，原因是因为无法访问官网给出的外网镜像，可能还会出现 WARNING: Ignoring : network error 通过在Dockerfile中
继续访问
alpine Linux的apk软件包管理器
Hping使用方法详解原理基础安装Hping的详细参数具体应用 原理基础 Hping是一个命令行下使用的TCP/IP数据包组装/分析工具，其命令模式很像Unix下的ping命令，但是它不是只能发送ICMP回应请求，它还可以支持TCP、UDP、ICMP和RAW-IP协议，它有一个路由跟踪模式，能够在两个相互包含的通道之间传送文件。Hping常被用于检测网络和主机，其功能非常强大，可在多种操作系统下运行，如Linux，FreeBSD，NetBSD，OpenBSD，Solaris，MacOs X，Windows。
继续访问
Dockerfile构建Alpine镜像/Linux使用apk下载设置资源(字体包/其他)失败/难产
进行构建之前注意 如果报OCI runtime create failed: systemd cgroup flag passed, but systemd support for managing cgroups is not available: unknown错误 请将daemon.json中的"exec-opts": ["native.cgroupdriver=systemd"]删掉 个人问题 我使用Dockerfile构建镜像时,使用Alpine版本的基础镜像包，进行构建一直会卡到 [INFO
继续访问
CentOS7安装docker经常出现的两个问题
这篇文章memo一下CentOS 7安装Docker经常出现的两个问题和对应方法。
继续访问
linux alpine系统切换安装源并安装telnet
1.alpine切换源 安装慢 apk add很慢 阿里镜像 sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories 科大镜像 sed -i 's/dl-cdn.alpinelinux.org/mirro
继续访问
Docker build镜像时，E: Failed to fetch
docker环境下的下载源依旧是国外源导致的，更换为对应版本的国内源即可。 1.在当前目录下，新建sources.list, 这里填写的是阿里源，18.04版本 deb bionic main restricted universe multiverse deb bionic-security main restricted universe multiverse d
继续访问
linux安装时间太久,为什么在Alpine Linux上安装Pandas需要很长时间
我注意到使用基本操作系统Alpine与CentOS或Debian在Docker容器中安装Pandas和Numpy(它的依赖关系)需要更长的时间.我在下面创建了一个小测试来演示时差.除了Alpine更新和下载构建依赖项以安装Pandas和Numpy的几秒钟之外,为什么setup.py需要比Debian安装多70倍的时间？有没有办法加速使用Alpine作为基本图像的安装,或者是否有另一个与Alpine...
继续访问
部署kubernetes官网博客
部署kubernetes官网博客 访问 有些时候不问题，部署离线内网使用官网以及博客， 各位尝鲜可以访问 安装docker root@cby:~#curl-sSL #Executingdockerinsta...
继续访问
Linux软件包安装(rpm、yum、apt-get、dpkg)
Linux RPM 1、RPM 的由来 rpm（英文全拼：redhat package manager） 原本是 Red Hat Linux 发行版专门用来管理 Linux 各项套件的程序，由于它遵循 GPL 规则且功能强大方便，因而广受欢迎。逐渐受到其他发行版的采用。RPM 套件管理方式的出现，让 Linux 易于安装，升级，间接提升了 Linux 的适用度 ...
继续访问
Docker 主要命令详解
Docker 简介及其命令详解前言一、Docker 是什么？1. Docker简介2. Docker 组成3. Docker 优点二、Docker 命令详解总结 前言 云计算时代的到来，要求运行环境的部署快速、准确。而使用Docker来完成环境的部署也被越来越多的企业所选择，所以掌握Docker十分必要。 一、Docker 是什么？ 1. Docker简介 Docker 是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的 Linux或Window
继续访问
docker E: Failed to fetch... 404 Not Found
E: Failed to fetch 404 http://... Not Found 可能是因为源版本过老 sudo apt-get update 解决
继续访问
Docker常用命令
本次测试的docker版本是Docker version 18.09.0, build 4d60db4 在以前的版本中，具体哪一个我没有仔细研究，docker的配置路径如下： 环境配置文件 /etc/sysconfig/docker-network /etc/sysconfig/docker-storage /etc/sysconfig/docker unit file /usr/lib/sy...
继续访问
[Docker]Docker官方起步指南学习笔记④——实例之基于Alpine的nodejs服务器
本次的目标是基于前三次课的知识，利用Alpine的最小环境，搭建node.js环境，并创建Hello world网页应用；最后将该容器打包成映像，发布到DockerHub上。
继续访问
alpine
源
超时
写评论
8
fetch属于web api吗
fetch属于web api。
今天的web计算平台包含了广泛的功能，其中的大部分均可以通过api（应用程序编程接口）访问。从简单的社会书签服务del.icio.us，到复杂得多的amazon s3全虚拟化存储平台，均基于web api。而fetch API是很重要的web api之一。
fetch API提供了一个JavaScript接口，用于访问和操纵HTTP管道的一些具体部分，例如请求和响应。它还提供了一个全局fetch()方法，该方法提供了一种简单、合理的方式来跨网络异步获取资源。Fetch还提供了专门的逻辑空间来定义其他与HTTP相关的概念。
Fetch Api的特点
1、并非取代ajax，而是对ajax传统api的改进。
2、精细的功能分割：头部信息、请求信息、响应信息等均分布到不同的对象，更利于处理各种复杂的ajax场景。
3、使用Promise api，更利于异步代码的书写。
4、fetch属于web api，理所当然只能在浏览器端运行。
fetch请求调试怎么重发
选中相应网络请求右键，复制为fetch
切换到"控制台"，粘贴编辑fetch请求，Enter发送请求。
fetch 是javascript中一个网络请求的函数或者工具，Edge/Chrome在我们 Copy as fetch 的时候帮我们把请求的各种参数转换成了使用 fetch 请求的代码，所以我们可以直接在控制台上直接执行从而达到请求重放的效果。
【ftech优惠码】的内容来源于互联网，如引用不当，请联系我们修改。
网友留言：