将图像文件附加到表单数据 - Cordova/Angular [英] Append image file to form data - Cordova/Angular

问题描述

我在当前项目中使用 Anuglar、Ionic 和 Cordova，并且我正在尝试将包含图像文件的 FormData POST 到我的服务器.现在我正在使用 cordova 相机插件 返回设备上图像的文件路径(例如:file://path/to/img).获得文件路径后，我想使用图像文件路径将图像文件附加到 FormData 对象.这是我现在的代码.

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);

上述代码在附加从 获取的文件时有效，但在设备上仅给出文件路径时无效.

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

我希望它看起来像这样

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

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

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

推荐答案

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

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.

这篇关于将图像文件附加到表单数据 - Cordova/Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！