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

Question

我在我当前的项目中使用 Anuglar、Ionic 和 Cordova，我正在尝试 POST 包含图像文件的 FormData 到我的服务器。现在我正在使用 cordova camera plugin 到 return 设备上图像的文件路径（例如：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

您确实需要发送文件内容。使用 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);

抱歉我的英语不好。

Answer 2

经过一番摸索，我设法找到了一个非常简单的解决方案。首先我添加了 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 对象，然后将其附加到表单数据。希望这可以帮助其他人寻找一种简单的方法来做到这一点。

Answer 3

您的 post 对解决我的问题非常有帮助。我正在使用 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();
});

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

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

Append image file to form data - Cordova/Angular

javascript

android

angularjs

cordova

ionic-framework