javascript - 使用 Javascript 将我服务器上的远程文件上传到第三方服务器

Question

我正在使用 PHP 在我的服务器上创建一个图像文件。现在我需要通过 POST 将其上传到第 3 方的服务器。最简单的方法是使用服务器端 cURL 脚本来完成此操作，但我必须通过我的客户端来完成，因为它需要在客户端和第 3 方服务器之间的事件 session 的上下文中上传。问题是我怎样才能最简单地做到这一点？

1. 是否可以使用 HTML 表单或 AJAX 调用并通过提供 URL 来上传图像？问题是第 3 方后端不接受 URL，它需要表示为好像是通过 Web 表单上传...

2. 如果那不可能，我正在考虑使用 AJAX 调用来下载图像并将内容保存到变量中。然后创建一个上传图像内容的表单，就好像在表单中选择了本地文件一样。我应该如何实现？

当我通过 Web 表单上传文件并查看发送的 HTTP header 时，我看到如下内容:

------WebKitFormBoundary3ygta7rqeBm1krBO
Content-Disposition: form-data; name="MAX_FILE_SIZE"

10000000
------WebKitFormBoundary3ygta7rqeBm1krBO
Content-Disposition: form-data; name="uploadedfile"; filename="test.jpg"
Content-Type: image/jpeg


------WebKitFormBoundary3ygta7rqeBm1krBO--

我是否应该创建一个类似这种格式的字符串，然后通过 AJAX 调用将其作为数据提交？我在哪里放置实际的二进制图像数据？我猜 Chrome 开发者工具会抑制该数据...

感谢您的指点。

Answer 1

我觉得最简单的好像就是你说的，通过你的服务器上传到第三方。有没有办法让您通过 PHP 脚本从用户 session 中获取任何内容？

否则，您可以尝试将图像以某种编码格式(例如 base64)发送回客户端(可能通过 AJAX)，在您的服务器生成图像后，然后构建自定义 XHR 以将文件发送给第 3 方。 . 这是一个示例:

var boundary = this.generateBoundary();
var xhr = new XMLHttpRequest;

xhr.open("POST", this.form.action, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        alert(xhr.responseText);
    }
};
var contentType = "multipart/form-data; boundary=" + boundary;
xhr.setRequestHeader("Content-Type", contentType);

for (var header in this.headers) {
    xhr.setRequestHeader(header, headers[header]);
}

// here's our data variable that we talked about earlier
var data = this.buildMessage(this.elements, boundary);

// finally send the request as binary data
xhr.sendAsBinary(data);

在此处查看更多信息(在“XMLHttpRequest 对象”部分下方):
http://igstan.ro/posts/2009-01-11-ajax-file-upload-with-pure-javascript.html