相关疑难解决方法(0)

我很难找到使用fetch实现上传进度指示器的文档或示例.

这是迄今为止我发现的唯一参考资料,其中指出:

进度事件是一个高级功能,暂时无法获取.您可以通过查看Content-Length标头并使用传递流来监视接收的字节来创建自己的标头.

这意味着您可以无需另外明确地处理响应Content-Length.当然,即使在Content-Length那里也可能是谎言.使用流可以根据需要处理这些谎言.

如何编写"传输流来监控字节"发送？如果它产生任何差异,我正在尝试这样做以支持从浏览器到Cloudinary的图像上传.

注意:我对Cloudinary JS库不感兴趣,因为它依赖于jQuery而我的应用程序没有.我只对使用原生javascript和Github的polyfill 执行此操作所需的流处理感兴趣.fetch

https://fetch.spec.whatwg.org/#fetch-api

是否有类似XHR的浏览器API可用于通过HTTP将二进制文件流式传输到服务器？

我希望随着时间的推移制作HTTP PUT请求并以编程方式创建数据.我不想一次创建所有这些数据,因为它可能会在内存中出现.一些psueudo代码来说明我所得到的:

var dataGenerator = new DataGenerator(); // Generates 8KB UInt8Array every second
var streamToWriteTo;
http.put('/example', function (requestStream) {
  streamToWriteTo = requestStream;
});

dataGenerator.on('data', function (chunk) {
  if (!streamToWriteTo) {
    return;
  }
  streamToWriteTo.write(chunk);
});

我现在有一个Web套接字解决方案,但更喜欢常规HTTP,以便更好地与一些现有的服务器端代码互操作.

编辑:我可以使用最前沿的浏览器API.我正在查看Fetch API,因为它支持请求体的ArrayBuffers,DataViews,Files等.如果我能以某种方式伪造其中一个对象,以便我可以使用动态数据的Fetch API,这对我有用.我尝试创建一个Proxy对象,看看是否有任何方法被调用,我可以修补.不幸的是,似乎浏览器(至少在Chrome中)正在使用本机代码而不是JS版本进行读取.但是,如果我错了,请纠正我.

我有一个需要将大文件上传到Azure BLOB存储的Web应用程序.我的解决方案使用HTML5 File API切片成块,然后将块作为blob块放置,块的ID存储在数组中,然后块作为blob提交.

该解决方案在IE中运行良好.在64位Chrome上,我已经成功上传了4Gb文件但是看到了非常大的内存使用量(2Gb +).在32位Chrome上,特定的镀铬工艺将达到约500-550Mb然后崩溃.

我看不到任何明显的内存泄漏或我可以改变以帮助垃圾收集的事情.我将块ID存储在一个数组中,所以显然会有一些内存蠕变,但这不应该很大.这几乎就像File API将整个文件保存在内存中一样.

它是作为一个从控制器调用的Angular服务编写的,我认为只是服务代码是相关的:

(function() {
    'use strict';

    angular
    .module('app.core')
    .factory('blobUploadService',
    [
        '$http', 'stringUtilities',
        blobUploadService
    ]);

function blobUploadService($http, stringUtilities) {

    var defaultBlockSize = 1024 * 1024; // Default to 1024KB
    var stopWatch = {};
    var state = {};

    var initializeState = function(config) {
        var blockSize = defaultBlockSize;
        if (config.blockSize) blockSize = config.blockSize;

        var maxBlockSize = blockSize;
        var numberOfBlocks = 1;

        var file = config.file;

        var fileSize = file.size;
        if (fileSize < blockSize) {
            maxBlockSize = …

注意:我不是在寻找任何替代方案.我知道这可以通过XMLHttpRequest来完成.我也不关心浏览器支持.我只想了解新的/即将推出的标准.

我有一个  File对象,我可以使用像这样的fetch上传它:

fetch(url, {
    method: "PUT",
    body: fileObject,
});

如何从中获取上传进度？

据我所知body,fetch选项可以是ReadableStream.那么也许有一种方法可以将File对象包装到ReadableStream并从中获取进度状态？

例如.这样的事情

fetch(url, {
    method: "PUT",
    body: asReadableStream(fileObject, onProgress),
});

谢谢.

题:

如何在服务器和客户端上实时读取和回显正在服务器上写入的上传文件的文件大小？

语境:

文件上传的进展被写入从服务器POST请求通过由fetch(),其中body被设置为Blob,File,TypedArray,或ArrayBuffer对象.

当前实现将File对象设置为body传递给第二个参数的对象fetch().

需求:

读取echo并向客户端写入正在写入服务器文件系统的文件的文件大小text/event-stream.GET在写入作为查询字符串参数的脚本作为变量提供的所有字节时停止.文件的读取当前发生在一个单独的脚本环境中,其中GET应该读取文件的脚本调用是在POST将文件写入服务器的脚本之后进行的.

没有达到将文件写入服务器或读取文件以获取当前文件大小的潜在问题的错误处理,尽管这将是echo文件大小部分完成后的下一步.

目前正试图满足要求使用php.虽然也有兴趣在c,bash,nodejs,python,或其他可用于执行相同任务的语言或方法.

客户端javascript部分不是问题.简而言之,在php万维网上使用的最常见的服务器端语言之一,实现该模式而不包括不必要的部分.

动机:

获取进度指标？

有关:

使用ReadableStream获取

问题:

入门

PHP Notice:  Undefined index: HTTP_LAST_EVENT_ID in stream.php on line 7

在terminal.

另外,如果替代

while(file_exists($_GET["filename"]) 
  && filesize($_GET["filename"]) < …

我要求我的Web应用程序中的客户端到服务器消息的延迟非常低.

我在stackoverflow上看过几篇帖子说最好使用websockets而不是HTTP来满足这个要求,但是很久以前.

今天,在2018年,随着HTTP/2的进展,是否仍然值得使用websockets这个用例？

这就是我的代码的样子

let body = {
            authCode: "XXXX",
            clientId: "YYYYYY",
            clientSecret: "ZZZZZZ"
        };


        fetch('https://api.myapp.com/oauth/token',{
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            mode: 'no-cors',
            body: body
        }).then(function(response){
            console.log("response: ", response);
        }).catch(function(error){
            console.log("could not get tokens: ", error);
        })

在 Chrome 中，这就是我所看到的

我试着这样做curl command，这就是它的样子

?  ~ curl -X POST -H "Content-Type: application/json" -d '{
  "authCode": "XXXX",
  "clientId": "YYYYY",
  "clientSecret": "ZZZZZZZZ"
}' https://api.myapp.com/oauth/token
{"authToken":"e141kjhkwr3432ca9b3d2128385ad91db4cd2:cca6b151-cab4-4de2-81db-9a739a62ae88:23000000"}

我在这里做错了什么？

更新

改成follow后，结果还是 HTTP 415

fetch('https://api.myapp.com/oauth/token',{
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json"
            },
            mode: …

我想用来fetch()查询支持我的搜索页面的 API 端点。它以 JSON 格式返回搜索结果列表。

我还想将用户提交的当前查询传递给 API。旧的实现使用 jquery 和getJSON。查看 getJSON 的文档，它说我可以传入一个data变量：

数据
类型：普通对象或字符串
随请求发送到服务器的普通对象或字符串。

查看 fetch的文档，我不确定如何将数据作为我的请求的一部分传递。所以我的问题是，我如何传入一个将与我的请求一起发送到服务器的字符串？

编辑：我想我可以将查询附加到请求 URL，如“/search/?q=Something”并发送。有没有人有更好的方法？