由网友(麋鹿)分享简介：我使用Anuglar，离子和科尔多瓦在我目前的项目，我想POST FORMDATA包含一个图像文件到我的服务器。现在，我使用的是科尔多瓦摄像头插件返回文件路径图像的设备（例如上：文件：//路径/到/ IMG）。有一次，我有一个文件路径我想要的图像文件附加到使用的图像文件路径FORMDATA对象。这是我的code现在。...

我使用Anuglar，离子和科尔多瓦在我目前的项目，我想POST FORMDATA包含一个图像文件到我的服务器。现在，我使用的是科尔多瓦摄像头插件返回文件路径图像的设备（例如上：文件：//路径/到/ IMG）。有一次，我有一个文件路径我想要的图像文件附加到使用的图像文件路径FORMDATA对象。这是我的code现在。

I am using Anuglar, Ionic and Cordova in my current project, and I'm trying to POST FormData containing an image file to my server. Right now I'm using the cordova camera plugin to return a file path to the image on the device (ex: file://path/to/img). Once I have the file path I want to append the image file to a FormData object using the images file path. Here is my code right now.

var fd = new FormData();

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

追加了取自文件时，code以上作品的＆LT;输入类型='文件'＆GT; ，但并不仅仅时给予合作文件路径的装置上。

The code above works when appending a file that is taken from an <input type='file'> but doesn't work when just given the file path on the device.

基本上FORMDATA正显示出这样的现在：

Basically the FormData is showing like this right now:

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

file://path/to/img

和我希望它看起来像这样

and I want it to look like this

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

我发现了许多不同的方式来上传用科尔多瓦文件传输的图像，并通过图像转换成一个base64，然后上传。但我无法找到刚才使用的路径和表单中发布它抓住了文件的任何简单的方法。我不是很熟悉文件API 所以任何帮助将是AP preciated

I found many different ways to upload the image using cordova FileTransfer and by converting the image to a base64 and then uploading it. But I couldn't find any simple ways of just grabbing the file by using the path and posting it within a form. I'm not very familiar with the File Api so any help would be appreciated

推荐答案

经过一番摆弄周围我设法找出一个pretty的简单解决方案。 首先，我添加了科尔多瓦文件的插件然后我用下面

After some fiddling around I manage to figure out a pretty simple solution. First I added the cordova file plugin then I use the code below

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对象，然后它添加到表单数据。希望这可以帮助别人寻找一种简单的方法来做到这一点。

So I'm just creating a form and using FileReader to insert an ArrayBuffer to the Blob object and then append that to the form data. Hopefully this helps someone else looking for an easy way to do this.