javascript - 如何在手机上下载图片并上传到我的服务器？

Question

我正在用phonegap/cordova 编写一个应用程序。在应用程序中，用户有一个个人资料，他们可以选择 Facebook 图片以包含在他们的个人资料中。

当他们为自己的个人资料选择图像时，我想将这些特定图像上传到我自己的服务器。

我做了一些研究，并能够编写一些下载图像的代码，但直到编写代码后我才在移​​动设备上进行测试。

我使用 XML HTTP 请求将图像下载为 blob。但是，在移动设备上进行测试时，我收到了未设置 blob.size 参数的错误。

我在浏览器中检查了一下，确实有 blob.size 参数存在。在移动设备中，blob.size 参数未定义。这让我相信我手机上的 webkit 不支持 blob，因此无法将图像下载为 blob。

我真的有两个问题:

1) 我的评估是否正确，因为 webkit 不支持 blob，所以未下载 blob？

2)如果1为真，在cordova中下载图像然后将其上传到我自己的服务器的正确方法是什么？或者，有什么方法可以调整我的代码，使其可以在移动设备上运行吗？另外我应该注意，由于文件已经下载到我的手机上，有没有办法简单地在本地存储中访问它们，而不是再次下载它们，然后将该文件上传到我的服务器？

我当前下载为 blob 的代码如下:

function xhrPromise(url){
    var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = function(e) {
        if (this.status == 200) {
        var myBlob = this.response;
        return myBlob;
        }
      };
    xhr.send(); 
  }

根据进一步的研究，我想知道解决方案是否是使用 cordova 文件传输插件？

如有任何建议，我们将不胜感激。

Answer 1

1) Webkit 通过 HTML 文件 API 支持 blob。阅读:Exploring the FileSystem APIs

2)我会尽力为您指出正确的方向。如果我想下载图像然后将其重新上传到另一台服务器，我会做什么。

• 使用Cordova's FileTransfer Plugin下载图片并将其写入 SD 卡 (Android) 或应用程序文档文件夹 (iOS) 中的临时位置。

• 如果图像小于 2MB，请使用简单的 HTML 标记链接到下载的图片，使用 CDVFILE 协议(protocol) <img src="cdvfile://localhost/persistent/temp/image.jpg" /> (对于 Android)然后使用 AJAX 将图像编码为 base64 将其发布到您的服务器。阅读:How to convert image into base64 string using javascript .

• 如果图像超过 2MB，请使用 Cordova's FileTransfer Plugin上传。

在使用 Cordova 的 FileTransfer 插件时，您会遇到 HTML File API，我强烈建议您保留此链接作为引用。阅读:Exploring the FileSystem APIs

我更喜欢使用base64编码的原因是因为1)我不喜欢依赖Cordova插件，它们曾经是 super 有缺陷的。 2) 您可以将 base64 字符串保存到 MySQL(但任何超过 2MB 的字符串都会影响您的服务器和对其进行编码的设备)。