首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Ajax blob返回文件不是downloading.And不是responsed.Just等待

问题描述:Ajax blob返回文件不是downloading.And不是responsed.Just等待。

答案:根据问题描述,您可能遇到了一个在使用Ajax请求返回文件时遇到的问题。在Ajax请求中,使用blob数据类型来获取文件的二进制数据,并进行后续的处理。然而,您遇到的问题是文件没有开始下载,也没有得到正确的响应(responsed),而是处于等待状态(Just等待)。

这个问题可能有以下几个可能的原因和解决方法:

  1. 响应头缺少必要的信息:在服务器返回文件时,确保响应头中包含了正确的Content-Type和Content-Disposition信息。Content-Type指示文件的媒体类型,例如application/pdf表示PDF文件;Content-Disposition用于指定文件的下载方式和文件名。可以通过设置Content-Disposition头字段的attachment属性来指定文件以附件方式下载。确保这些信息正确设置,以便浏览器能够正确地处理文件下载。
  2. Ajax请求配置错误:在发起Ajax请求时,确保将responseType设置为'blob',以便正确处理二进制文件。例如:
代码语言:txt
复制
var xhr = new XMLHttpRequest();
xhr.open('GET', 'file-url', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    var blobFile = new Blob([this.response], { type: 'application/pdf' });
    // 进一步处理blobFile
  }
};
xhr.send();
  1. 跨域资源共享(CORS)问题:如果您的Ajax请求跨域了,服务器端需要正确设置CORS响应头,允许客户端获取跨域资源。确保服务器返回的响应头中包含了Access-Control-Allow-Origin字段,并且该字段的值设置为允许访问的域名。例如:
代码语言:txt
复制
Access-Control-Allow-Origin: https://www.example.com
  1. 其他网络或服务器问题:在一些情况下,文件下载的问题可能与网络连接或服务器配置有关。请确保您的网络连接正常,并且服务器能够正常响应文件请求。

总结:以上是可能导致Ajax blob返回文件不是downloading而是等待的几个常见原因和解决方法。根据具体情况进行排查和调试,确保服务器正确返回文件并设置了正确的响应头,同时在Ajax请求中正确设置responseType,并处理可能的CORS问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

DOMString、Document、FormData、Blob、File、ArrayBuffer (转)

比起普通的ajax, 使用FormData的最大优点就是我们可以异步上传一个二进制文件。 以上为官方口吻的解释,略抽象。...我们查看demo页面这个mm图片元素,会发现其URL地址既不是传统HTTP,也不是Base64 URL,而是Blob形式~如下截图示意: 这就是Blob在Web开发中非常重要的一个功能——创建Blob...但是,并不是所有的图片都能以Blob形式请求,因为,毕竟是Ajax请求嘛,还是有一定的跨域限制。...Blob对象所包含数据的MIME类型 方法File.getAsBinary()[过时不推荐使用]二进制形式返回文件数据(请使用FileReader对象的FileReader.readAsBinaryString...例如,我们设置Ajax请求的responseType为”arraybuffer“,我们去请求某mm图片,返回的response就是ArrayBuffer,就是个二进制对象。

2.8K30
  • 前端文件下载通识篇

    方案一 :原生提交,后端返回文件流 这种方式是利用form.submit直接向后端提交,后端返回文件流生成的文件,后端处理成功后会直接返回到页面,浏览器会整理并打开自己的保存下载文件机制 。...提交,后端返回在线文件地址 利用ajax或者新生的axios去提交请求,后端会返回一个线上的文件地址,前端可以通过原生的window.open打开这个地址就可以实现下载;也可以通过a标签设置href以及...(ajax无法直接处理返回文件类型),用于解决window.open方案被浏览器拦截的情况。...除了a标签提供的download属性,多介绍了一种html:blob的方式。另外针对图片可以通过base64的方式。...所以不是很建议把这个当做很常规的方案来考虑。

    2.1K20

    原 荐 webSocket与ajax、web

    当然,不是说有了webSocket,它就out了,ajax现在依旧好用。...取值应当是"blob"或者"arraybuffer"。 "blob"表示使用DOMBlob 对象,而"arraybuffer"表示使用 ArrayBuffer 对象。...然后只要服务器返回了上面我放的那一系列balabala的东西,就代表已经接受请求,webSocket建立成功啦!...客户端:hello hello,有没有新信息,没有的话就等有了再返回给我吧(Request) 服务端:额。。。 (。。。。等待到有消息的时候。。。。)...有了,给你(Response) 很明显,ajax轮询和long poll弊大于利: (1)被动性 上面这两种方式都是客户端先主动消息给服务端,然后等待服务端应答,要知道,等待总是难熬的,如果服务端能主动发消息多好

    1.1K70

    文件上传服务器:支持超大文件HTTP断点续传的实现办法

    网上也有大师采用分片文件上传方式来实现大文件上传,方法是将文件切成小片,例如4MB一个片段,服务器端每次接收一小片文件保存成一个临时文件等待所有片段传输完毕后,再执行合并。...HASH值计算,如果您不是十分考究,应该可以用于产品。...如果确实需要实现HTTP秒传,可能得这么做,这样如果不同的人上传的文件内容一致,就可避免重复上传,直接返回结果即可。...fileid='+fileid + '&t='+t; var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function () {...三、执行上传 在查询完文件的断点续传信息后,如果文件确实以前已经上传,服务器将返回已经上传过的文件尺寸,我们接着从已经上传的文件尺寸位置开始上传数据即可。

    1.8K10

    原 荐 webSocket与ajax、web

    当然,不是说有了webSocket,它就out了,ajax现在依旧好用。...取值应当是"blob"或者"arraybuffer"。 "blob"表示使用DOMBlob 对象,而"arraybuffer"表示使用 ArrayBuffer 对象。...然后只要服务器返回了上面我放的那一系列balabala的东西,就代表已经接受请求,webSocket建立成功啦!...客户端:hello hello,有没有新信息,没有的话就等有了再返回给我吧(Request) 服务端:额。。。 (。。。。等待到有消息的时候。。。。)...有了,给你(Response) 很明显,ajax轮询和long poll弊大于利: (1)被动性 上面这两种方式都是客户端先主动消息给服务端,然后等待服务端应答,要知道,等待总是难熬的,如果服务端能主动发消息多好

    2.1K60

    文件上传服务器:支持超大文件HTTP断点续传的实现办法

    网上也有大师采用分片文件上传方式来实现大文件上传,方法是将文件切成小片,例如4MB一个片段,服务器端每次接收一小片文件保存成一个临时文件等待所有片段传输完毕后,再执行合并。...HASH值计算,如果您不是十分考究,应该可以用于产品。...如果确实需要实现HTTP秒传,可能得这么做,这样如果不同的人上传的文件内容一致,就可避免重复上传,直接返回结果即可。...fileid='+fileid + '&t='+t; var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function () {...三、执行上传 在查询完文件的断点续传信息后,如果文件确实以前已经上传,服务器将返回已经上传过的文件尺寸,我们接着从已经上传的文件尺寸位置开始上传数据即可。

    1.6K10

    你知道这样的mock吗

    Mockjs mock数据用过的人一定不陌生,他的好处也是层出不穷,比如下面就是一段对mockjs很好的描述: 前后端分离 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。...(等等) 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的请求上拦截ajax,并根据mockjs的mock数据的规则,模拟真实接口返回的数据,并将随机的模拟数据返回参与相应的数据交互处理...这里要注意的是window.URL.createObjectURL(blob)这个方法的参数他接收的是一个对象类似这样 所以引入mock数据若是没有屏蔽出错的也是这一步,mock数据拦截了ajax...this.downloadFileByURL(); 所以屏蔽mock前,返回的response会是他当前页面的html并没有返回一个blob对象,从而导致window.URL.createObjectURL...(blob)这一步就报错,如果是实际中请求接口返回文件流,那么他会将文件流直接返回给你,你打印出来看到的就是一串乱码(下图),也就是说没有屏蔽mock前通过ajax请求返回blob类型数据他不会做处理

    46520

    fetch api 浅谈

    作者:巫枫 fetch api浅谈 作为传说中的xhr替代品,现在fetch api已经被开始在一些前端项目中使用了,比如阿里的一些产品已经将jq的ajax模块切换到fetch下了。...; } catch(e) { // throw e } }; fetchDemo();     这样看起来是不是爽多了,只是现在这个特性还只是在草案中,虽然babel已经可以支持了...2、第一个then函数里面处理的是response的格式,这里的response具体返回如下: 可见response对象提供了多种转换格式的方式,用于将返回值的类型转换为blob,json,也可以使用...response的状态和返回数据也可以从ok,status,statusText等对象中获取到,还能直接读取到返回值的Headers信息。...同时,我也相信,前端慢慢会出现类似的fetch包装库,方便大家使用吧 5、参考 fetch msdn 传统 Ajax 已死,Fetch 永生 github fetch example

    2.4K00

    手把手教你前端本地文件操作与上传

    , {type:'application/json'}); 为了获取本地的blob数据,我们可以用ajax发个本地的请求: $("#editor").on("paste",function(event)...}); 上面代码把blob打印出来是这样的: 能得到它的大小和类型,但是具体内容也是不可见的,它有一个slice的方法,可用于切割大文件。...链接的,除了上面提到的img之外,另外一个很常见的是video标签,如youtobe的视频就是使用的blob: 这种数据不是直接在本地的,而是通过持续请求视频数据,然后再通过blob这个容器媒介添加到video...上面,我们使用了三种方式获取文件内容,最后得到: FormData格式 FileReader读取得到的base64或者ArrayBuffer二进制格式 如果直接就是一个FormData了,那么直接用ajax...ifame,然后获取这个ifrmae的内容就可得到上传接口返回的结果。

    1.9K110

    前端本地文件操作与上传

    blob是一种类文件的存储格式,它可以存储几乎任何格式的内容,如json: let data = {hello: "world"}; let blob = new Blob([JSON.stringify...(data)], {type : 'application/json'}); 为了获取本地的blob数据,我们可以用ajax发个本地的请求: $("#editor").on("paste", function...这种数据不是直接在本地的,而是通过持续请求视频数据,然后再通过blob这个容器媒介添加到video里面,它也是通过URL的API创建的: let mediaSource = new MediaSource...上面,我们使用了三种方式获取文件内容,最后得到: FormData格式 FileReader读取得到的base64或者ArrayBuffer二进制格式 如果直接就是一个FormData了,那么直接用ajax...ifame,然后获取这个ifrmae的内容就可得到上传接口返回的结果。

    1.6K20

    XMLHttpRequest使用指南大全

    以下是我认为对Ajax较为准确的解释:(摘自what is AjaxAJAX stands for Asynchronous JavaScript and XML....从上面的解释中可以知道:ajax是一种技术方案,但并不是一种新技术。...数据,最终用户通过this.responseText拿到的就是图片文件对应的二进制字符串,最后再将其转换为 blob 数据。...以下3种情况下值都为null:请求未完成、请求失败、请求成功但返回数据无法被正确解析时 如何追踪ajax请求的当前状态 在发一个ajax请求后,如果想追踪请求当前处于哪种状态,该怎么做呢?...这样的判断是有坑儿的,比如当返回的http状态码不是200,而是201时,请求虽然也是成功的,但并没有执行成功回调逻辑。所以更靠谱的判断方法应该是:当http状态码为2xx或304时才认为成功。

    1.3K30

    你真的会使用XMLHttpRequest吗?

    以下是我认为对Ajax较为准确的解释:(摘自what is AjaxAJAX stands for Asynchronous JavaScript and XML....从上面的解释中可以知道:ajax是一种技术方案,但并不是一种新技术。...数据,最终用户通过this.responseText拿到的就是图片文件对应的二进制字符串,最后再将其转换为 blob 数据。...以下3种情况下值都为null:请求未完成、请求失败、请求成功但返回数据无法被正确解析时 如何追踪ajax请求的当前状态 在发一个ajax请求后,如果想追踪请求当前处于哪种状态,该怎么做呢?...这样的判断是有坑儿的,比如当返回的http状态码不是200,而是201时,请求虽然也是成功的,但并没有执行成功回调逻辑。所以更靠谱的判断方法应该是:当http状态码为2xx或304时才认为成功。

    1.6K30

    jsonp总结

    callbackFunction) 返回 json 数据的包装(故称为 jsonp,即json padding),形如 callback({"name":"Finley","gender":"Male...callbackFunction"> 例子1中script标签是自己创建的,不方便,可以改为自动动态创建 参见一个开源库,代码非常简单 https://github.com/webmodules/jsonp/blob.../master/index.js 1、ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架都把jsonp...总而言之,jsonp不是ajax的一个特例,哪怕jquery等巨头把jsonp封装进了ajax,也不能改变这一点!...JSONP的总结: 只能用GET请求 核心是动态添加script标签来调用服务器提供的js脚本 JSONP不是ajax的特例,只不过经常被封装进了ajax

    1K20

    前端下载文件的5种方法的对比

    即浏览器能预览的还是会预览,而不是下载。 简单用法: 点击下载 可以带上属性值,指定下载的文件名,即重命名下载文件。...,其实可以跟后端协商好,在后端层做多一层转发,最终返回给前端的文件链接跟下载页同域就好了。...这种方法的优势在于,它除了能利用已知文件地址路径进行下载外,还能通过发送ajax请求api获取文件流进行下载。...因为发请求时已设置返回数据类型为 Blob类型( xhr.responseType='blob'),所以 target.response就是一个 Blob对象,打印出来会看到两个属性 size和 type...如果发送请求时不设置 xhr.responseType='blob',默认ajax请求会返回 DOMString类型的数据,即字符串。

    7.2K63

    关于 Blob

    Node 层返回的二进制文件流字符串并下载文件 这里我利用 Blob 实现文件拆分再合并下载的方法,算是第一次使用 我们最常见的应该是 Blob URL 技术,文件上传的预览、视频播放的 src,均是采用这种技术实现...,可赋值到 a 标签 href 属性进行下载 const url = URL.createObjectURL(blob) 通过 Blob 生成文件、利用 Blob URL 获取下载链接,这样就实现后端返回二进制格式的文件进行合并再下载...URL 形式呢 从 ==URL.createObjectURL(blob)== 方法来看,首先要拿到存储这个视频原始数据的 Blob 对象 平时我们请求接口可以使用 axios / ajax / xhr...Blob 对象,接下来只要然后通过 createObjectURL 生成 Blob URL 赋值给视频的 src 属性就可以了 ajax('video.mp4', function(res){ const...的 XMLHttpRequest 的 progress 事件,这个事件会返回文件已上传的大小和总大小,可实现上传进度的变化 博客地址:https://ainyi.com/88

    2.7K10
    领券