javascript - 无法使用 Rest API (JavaScript) 从浏览器上传 Azure 存储文件共享文件

Question

我正在尝试将文件从浏览器直接上传到文件共享文件。 operation's spec非常简单，将 HTTP PUT 请求发送到 URL(带有 SAS token )以及一些 header 。我尝试使用简单的 HTML 表单和一些支持 JavaScript 来实现此功能 jsfiddle 。令我惊讶的是，系统失败了，并响应 XML 表明 Content-Length header 不正确:

<?xml version="1.0" encoding="utf-8"?>
<Error>
  <Code>InvalidHeaderValue</Code>
  <Message>The value for one of the HTTP headers is not in the correct format.
RequestId:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
Time:0000-00-00T00:00:00.0000000Z</Message>
  <HeaderName>Content-Length</HeaderName>
  <HeaderValue>12345</HeaderValue>
</Error>

我仔细检查了文档，它表明 Content-Length header 不应存在，或者它应该有一个专门包含 0 的值。我做了一些挖掘，然后 Content-Length是 forbidden header name ，这意味着您无法以编程方式调整该值。

对于我的困惑，使用 Azure Portal 中的 embeddd Azure Storage Explorer跳过某种循环以指定 Content-Length:0。

我的目标是:

• 从浏览器使用 REST API
• 不引入任何外部库
• 不引入任何服务器

有没有办法从浏览器使用 REST API？

我已经检查过的一些事情:

• 我尝试通过 headers 属性强制 Content-Length:0。
• 我已确保我的 Azure 存储帐户(用于文件)中的 CORS 设置已更新，以适应我的浏览器位置。
• 我尝试与 Blobs 集成作为比较，这在示例中效果很好，但不是我对我的项目感兴趣的。
• 我尝试过在浏览器之外使用 API，并且在发送同一请求时没有出现任何问题(当然 Content-Length:0 与规范的要求有所不同)。<
• 我尝试从 Azure 门户制作的记录的 XHR 中尽可能模仿请求 header 。

Answer 1

在文件存储中创建文件与上传 blob 不同。

在文件存储中，您需要做的第一件事是使用Create File创建一个空文件。休息操作。在此操作期间，您可以在 x-ms-content-length 请求 header 中指定要创建的文件大小(内容的长度)。

创建空文件后，您可以使用Put Range发送要写入该文件的内容。手术。这是您实际发送内容的地方。您需要使用 Range 或 x-ms-range 请求 header 来指定您希望在该空文件中写入要发送的数据的确切位置。

基于这些，我修改了你的代码。以下是修改后的方法:

async function upload(url, headers, content) {           
    if (!url) { return; }

    const init = {
        method: 'PUT',
        body: content,
        headers: headers
    };
    console.log(init);
    const response = await fetch(url, init);

    document.getElementById('response-content').innerText = await response.text();
}

async function uploadToFileStorage() {
    console.log('creating empty file');
    const url = document.getElementById('url').value;
    const content = document.getElementById('content').value;
    const headers = {
      'content-length': 0,
      'x-ms-type': 'file',
      'x-ms-content-length': content.length
    }
    await upload(url, headers, '');
    console.log('empty file created.');
    const url2 = url + '&comp=range';
    const headers2 = {
        'Content-Length': content.length,
        'x-ms-version': '2015-02-21',
        'Range': 'bytes=0-' + (content.length-1),
        'x-ms-write': 'update'
    };
    await upload(url2, headers2, content);
}