无法使用Rest API（JavaScript）从浏览器上载Azure存储文件共享文件

我正在尝试将文件从浏览器直接上载到文件共享文件。方法非常简单，将HTTP PUT请求发送到URL（带有）以及一些头。我试图用一个简单的HTML表单和一些支持JavaScript来实现这一点。令我惊讶的是，系统出现故障，并响应XML，表明

内容长度

标题不正确：

InvalidHeaderValue
其中一个HTTP标头的值格式不正确。
请求ID:XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
时间：0000-00-00T00:00:00.0000000Z
内容长度
12345

我仔细检查了文档，它指出

内容长度

标题不应该存在，或者应该有一个值专门包含

0

。我做了一些挖掘，并且是一个，这意味着您不能以编程方式调整值

让我感到困惑的是，为了指定

内容长度：0

，在中使用Embeddedd Azure存储资源管理器会遇到一些困难

我的目标是：

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

有没有办法从浏览器中使用RESTAPI

我已经检查了一些东西：

• 我已尝试通过

  标题

  属性强制执行

  内容长度：0

• 我已确保我的Azure存储帐户（用于文件）中的CORS设置已更新为我的浏览器位置的帐户
• 我尝试将与集成为比较，这在示例中非常有效，但我对我的项目不感兴趣
• 我已尝试在浏览器外使用API，在发送相同请求时没有问题（当然

  内容长度：0

  与规范要求的不同）
• 我已经尝试从Azure门户制作的记录XHR中尽可能多地模拟请求头

---

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

在文件存储中，您需要做的第一件事是使用REST操作创建一个空文件。在此操作期间，您可以在

x-ms-content-length

请求头中指定要创建的文件大小（内容长度）

创建空文件后，使用操作将要写入的内容发送到文件。这是您实际发送内容的地方。您需要使用

Range

或

x-ms-Range

请求头来指定您希望在该空文件中写入所发送数据的确切位置

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

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);
}

---

谢谢你的快速回复！在看到这一点之后，我可以看出我是如何忽略了Azure门户实现的，因为我忽略了第一个请求没有内容这一事实。