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

我在当前的项目中使用了Anuglar、Ionic和Cordova，我试图将包含图像文件的FormData发布到我的服务器。现在，我正在使用返回设备上图像的文件路径（例如：file://path/to/img). 一旦有了文件路径，我想使用图像文件路径将图像文件附加到FormData对象。这是我的密码

var fd = new FormData();

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

上述代码在追加从

获取的文件时有效，但在设备上仅给定文件路径时无效

基本上，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，然后上传。但是我找不到任何简单的方法，通过使用路径抓取文件并将其发布到表单中。我不太熟悉，所以如果您需要发送文件内容，我们将不胜感激。使用HTML5 FileAPI，您需要创建一个对象

不久前，我用cordova开发了一个应用程序，我必须读取一些文件，我创建了一个名为的库（首先，cordova文件系统，但它在一些浏览器中工作）

它是beta状态的，但我使用它，效果很好。您可以尝试这样做：

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

---

对不起，我的英语很差。

经过一番努力，我终于想出了一个非常简单的解决办法。 首先我添加了代码，然后使用下面的代码

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对象，然后将其附加到表单数据。希望这能帮助其他人找到一个简单的方法来解决这个问题。

你的帖子对解决我的问题非常有帮助。我正在使用Ionic 4并尝试使用标准http和文件客户端上传图像。供参考的关键代码如下：

返回此.file.readAsArrayBuffer（路径，文件）。
然后（blob=>{
const imgBlob=新Blob（[Blob]，{type:'image/jpeg'}）；
append（'image[file]”，imgBlob）；
返回this.http.post（url、formData、headers.subscribe（）；
});漂亮。干得好，乔·康普特。这正是我想要的。我一直避免这样做，因为我不确定我的服务器将如何处理blob。。。但显然这不是问题。谢谢你好，你能和js一起分享html代码吗。谢谢：）我写这段代码已经有一段时间了，但我相信
attachment.img
是一个带有本地图像路径值的字符串。比如说
“file://your/images/path“
。这个链接可能有助于@kiranredyth这个答案令人震惊！干得好。在我的例子中，我甚至不需要
FormData（）
，只需要FileReader（）并使用Blob（）将图像上传到我的服务器。