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

Question

我在我当前的项目中使用 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 不是很熟悉所以任何帮助将不胜感激

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