附加图像文件以形成数据-Cordova / Angular

一尘不染

附加图像文件以形成数据-Cordova / Angular

angularjs

我在当前项目中使用Anuglar，Ionic和Cordova，并且试图将包含图像文件的FormData
POST到服务器。现在，我正在使用cordova相机插件返回设备上图像的文件路径（例如：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不太熟悉，因此不胜感激

阅读 307

2020-07-04

共1个答案

一尘不染

经过一番摆弄之后，我设法找到了一个非常简单的解决方案。首先，我添加了cordova文件插件，然后使用下面的代码

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对象，然后将其附加到表单数据中。希望这可以帮助其他人寻找一种简便的方法。

2020-07-04