将图像文件附加到表单数据 - Cordova/Angular答案

【问题标题】：Append image file to form data - Cordova/Angular将图像文件附加到表单数据 - Cordova/Angular
【发布时间】：2015-05-04 19:36:51
【问题描述】：

我在我当前的项目中使用 Anuglar、Ionic 和 Cordova，我正在尝试将包含图像文件的 FormData 发布到我的服务器。现在我正在使用cordova camera plugin 来返回设备上图像的文件路径（例如：file://path/to/img）。获得文件路径后，我想使用图像文件路径将图像文件附加到 FormData 对象。这是我现在的代码。

var fd = new FormData();

fd.append('attachment', file);
fd.append('uuid', uuid);
fd.append('userRoleId', userRole);

上面的代码在附加从<input type='file'> 获取的文件时有效，但在仅给出设备上的文件路径时无效。

现在 FormData 基本上是这样显示的：

------WebKitFormBoundaryasdf
Content-Disposition: form-data; name="attachment"; 

file://path/to/img

我希望它看起来像这样

------WebKitFormBoundaryasdf
Content-Disposition: form-data; name="attachment"; filename="jesus-quintana.jpg"
Content-Type: image/jpeg

我发现了许多不同的方法来使用cordova FileTransfer 上传图像并将图像转换为base64 然后上传它。但是我找不到任何简单的方法来通过使用路径来获取文件并将其发布在表单中。我对File Api 不是很熟悉，因此我们将不胜感激

【问题讨论】：

标签： javascript android angularjs cordova ionic-framework

【解决方案1】：

经过一番折腾，我设法找到了一个非常简单的解决方案。首先我添加了cordova file plugin 然后我使用下面的代码

var fd = new FormData();
     window.resolveLocalFileSystemURL(attachment.img, function(fileEntry) {
         fileEntry.file(function(file) {
             var reader = new FileReader();
                 reader.onloadend = function(e) {
                      var imgBlob = new Blob([ this.result ], { type: "image/jpeg" } );
                      fd.append('attachment', imgBlob);
                      fd.append('uuid', attachment.uuid);
                      fd.append('userRoleId', 12345);
                      console.log(fd);
                      //post form call here
                 };
                 reader.readAsArrayBuffer(file);

         }, function(e){$scope.errorHandler(e)});
    }, function(e){$scope.errorHandler(e)});

所以我只是创建一个表单并使用 FileReader 将 ArrayBuffer 插入 Blob 对象，然后将其附加到表单数据。希望这可以帮助其他正在寻找简单方法的人。

【讨论】：

美丽。做得很好，@Joe Komputer。这正是我所寻求的。
我一直避免这样做，因为我不确定我的服务器将如何处理 blob……但显然这没有问题。谢谢！！
你好，能把html代码和js一起分享一下吗？谢谢:)
我写这段代码已经有一段时间了，但我相信attachment.img 是一个带有本地图像路径值的字符串。所以像"file://your/images/path" 这样的东西。这个链接可能会帮助here@KiranReddy
这个答案令人震惊！不错的作品。在我的情况下，我什至不需要FormData()，只需要 FileReader() 并使用 Blob() 将图像上传到我的服务器。 stackoverflow.com/questions/47003749/…

【解决方案2】：

您确实需要发送文件内容。使用 HTML5 FileAPI，您需要创建一个 FileReader 对象。

前段时间，我用 cordova 开发了一个应用程序，我不得不读取一些文件，然后我创建了一个名为 CoFS 的库（首先，由 Cordova FileSystem 开发，但它在某些浏览器中工作）。

它处于测试状态，但我使用它并且运行良好。您可以尝试这样做：

var errHandler = function (err) {
   console.log("Error getting picture.", err);
};

var sendPicture = function (file) {

    var fs = new CoFS();

    fs.readFile(file, function (err, data) {

        if (err) {
            return errHandler(err);
        }

        var fd = new FormData();

        fd.append('attachment', new Blob(data));
        fd.append('uuid', uuid);
        fd.append('userRoleId', userRole);

        console.log("Data of file:" + data.toString('base64'));
        // Send fd...

    });

};

navigator.camera.getPicture(sendPicture, errHandler);

对不起，我的英语不好。

【讨论】：

【解决方案3】：

您的帖子对解决我的问题非常有帮助。我正在使用 Ionic 4 并尝试使用标准 http 和文件客户端上传图像。参考的关键代码在这里：

return this.file.readAsArrayBuffer(path, file).
  then(blob => {
    const imgBlob = new Blob([blob], { type: 'image/jpeg' } );

    formData.append('image[file]', imgBlob);

    return this.http.post(url, formData, headers).subscribe();
});

希望它能像对我一样帮助别人。

【讨论】：