Question

我正在尝试使用Fetch API上传大文件，当我在chrome中发布大于128MB的数据并在Firefox中发布大于256MB的数据时，我遇到了问题。我的问题是是否有通过chrome或Firefox的配置来增加此最大值的方法？我只是做错了吗？是否存在更好的异步发布大数据的替代方法？

以下是显示问题的简短示例：https://jsfiddle.net/hspw4bzo

function performFetch() {
    const megabytes = document.getElementById( 'megabytes' ).value * 1;
    const largeString = (new Array(megabytes * 1024 * 1024 )).join("x");

    const options = {
      redirect: 'follow',
      method: 'POST',
      body: largeString
    };

    fetch( 'https://jsfiddle.net/', options ).then( () => {
      console.log( 'success' )
    } )
  }

当您点击“执行”按钮时，它将启动POST请求，其正文大小为128MB。在chrome中，这会导致框架崩溃。

Answer 1

您不应将文件作为字符串上传；这对于旧商品XMLHttpRequest也有效。您可能会遇到服务器或浏览器（当前正在使用的浏览器）的极限。

改为使用Blob的分段上传，例如G。就像他们here一样：

const formData = new FormData()
formData.append('blob', new Blob(['Hello World!\n']), 'test')

fetch('http://localhost:5001/api/v0/add', {
  method: 'POST',
  body: formData
})
.then(r => r.json())
.then(data => {
  console.log(data)
})

Answer 2

我发现在发布大量数据时，使用 Blob 可以缓解firefox引发的内存不足错误和chrome崩溃的麻烦。在查看其他答案here和here

之后，我得出了Blob的用法

  function performFetch() {
    const megabytes = document.getElementById( 'megabytes' ).value * 1;
    const largeString = (new Array(megabytes * 1024 * 1024 )).join("x");

    const options = {
      redirect: 'follow',
      method: 'POST',
      body: new Blob( [ largeString ], { type: 'text/plain' } )
    };

    fetch( 'http://example.com', options ).then( () => {
      console.log( 'success' )
    } )
  }

增加Chrome中提取API的最大主体尺寸

2 个答案: