Question

我在我当前的项目中使用Anuglar，Ionic和Cordova，并且我试图将包含图像文件的FormData发布到我的服务器。现在我使用cordova camera plugin将文件路径返回到设备上的图像（例如：file：// path / to / img）。一旦我有了文件路径，我想使用images文件路径将图像文件附加到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对象，然后将其附加到表单数据。希望这有助于其他人寻找一种简单的方法来做到这一点。

Answer 2

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

您的帖子对解决我的问题非常有帮助。我正在使用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

3 个答案: