Asana API - 使用 Ajax 上传文件答案

【问题标题】：Asana API - upload files using AjaxAsana API - 使用 Ajax 上传文件
【发布时间】：2017-09-14 10:44:17
【问题描述】：

我有一个项目需要将文件上传到 Asana。如果可能的话，我希望能够通过 Asana 的 API 来做到这一点。我已经能够使用 Ajax Post 请求在 Asana 中成功创建任务。无论如何使用 Ajax Post 请求将文件上传到 Asana 任务？我希望能够直接从 HTML FileUplaod 对象上传文件。有谁知道这是否可能？

我曾尝试将这样的 JSON 对象发布到附件 API，但这不起作用。

https://app.asana.com/api/1.0/tasks/{taskID}/附件

{ “父母”：1337， "download_url": "https://www.dropbox.com/s/1234567890abcdef/Screenshot.png?dl=1", }

我也不想使用 url 发帖，如果可能的话，我想直接从 FileUpload 对象发帖。

【问题讨论】：

标签： javascript ajax jquery-file-upload asana asana-api

【解决方案1】：

我能够使用以下代码解决此问题。

    function addAttachment(taskID)
        {
            var data = new FormData();
            data.append("file", document.getElementById("fileUploader").files[0]);

            var xhr = new XMLHttpRequest();

            xhr.addEventListener("readystatechange", function () {
              if (this.readyState === 4) {
                console.log(this.responseText);
              }
            });

            xhr.open("POST", "https://app.asana.com/api/1.0/tasks/"+taskID+"/attachments");
            xhr.setRequestHeader("authorization", "Bearer <access-token>");

            xhr.send(data);
        }

【讨论】：

【解决方案2】：

简短的回答是查看另一个堆栈溢出问题，它很好地描述了如何解决这个问题。 sending a file as multipart through xmlHttpRequest

长答案是这样的：

上传文件的“感觉”与我们 API 的大多数其他部分不同，因为附件端点期望获取 Content-Type: multipart/form-data 的内容。要使其正常工作，您必须做好几件事：

您必须将该 Content-Type 请求标头设置为 multipart/form-data 并在该标头中将键 boundary 设置为唯一的，最好是长边界来分隔文件，让我们在此示例中使用 1z2x3c4v5b .
上传的正文以 2 个破折号和边界开始，即--1z2x3c4v5b，后跟换行符
仍在上传正文中，在分隔符之后，您必须提供一些“标题”，为文件正确指定 Content-Disposition 和 Content-Type（即它是什么类型的图像，它是什么名字是，那种东西）
2 个换行符
文件的原始字节数
2 个换行符
2 个破折号、分隔符和 2 个最后的破折号，即--1z2x3c4v5b--

请注意our Attachments documentation 的示例中的所有这些功能是如何结合在一起的。这种歌舞必须完成恰到好处，这就是另一篇 SO 帖子的作者所说的“XHR 将注意正确的标头和请求正文编码”。您可以尝试自己解决此问题，但我会推荐他们概述的方法，因为它是迄今为止最简单的方法。

【讨论】：