使用ionic4 App上传文件的问题

Question

我正在使用教程 Ionic 4 图像指南（使用 POST 捕获、存储和上传）。

https://devdactic.com/ionic-4-image-upload-storage/

除了 readFile 方法之外，我的大多数东西都在工作。

readFile(file: any) {
  console.log ("readFile", file); // [log] - readFile
  const reader = new FileReader();
  console.log ("reader", reader); // [log] - reader
  reader.onloadend = () => {
    console.log ("reader progress");  // do not see in xcode
    const formData = new FormData();
    console.log ("formData", formData);  // do not see in xcode
    const imgBlob = new Blob([reader.result], {
        type: file.type
    });
    formData.append('file', imgBlob, file.name);
    this.uploadImageData(formData);
  };
  reader.readAsArrayBuffer(file); 
  console.log ("readAsArrayBuffer", file);  // [log] - readAsArrayBuffer
}

在第 5 行 reader.onloadend 它似乎停止工作了。 console.logs 不显示在 Xcode 中。或 Android 工作室。我已经构建了这个测试版本以完全匹配教程。

请注意，我使用的是“@angular/cli”：“~8.1.2”。这会破坏 reader.onloadend 吗？

下面是我的console.logs

[log] - readFile {"name":"1569941078510.jpg","localURL":"cdvfile://localhost/library-nosync/1569941078510.jpg",
"type":"image/jpeg","lastModified":1569941078490.799,
"lastModifiedDate":1569941078490.799,"size":6673995,"start":0,"end":6673995}


[log] - reader {"__zone_symbol__originalInstance":
{"_readyState":0,"_error":null,"_result":null,"_progress":null,"_localURL":"","_realReader":{}}}

[log] - readAsArrayBuffer {"name":"1569941078510.jpg","localURL":"cdvfile://localhost/library-nosync/1569941078510.jpg",
"type":"image/jpeg","lastModified":1569941078490.799,"lastModifiedDate":1569941078490.799,"size":6673995,"start":0,"end":6673995}

Answer 1

问题是我使用的是添加了一些 cordova 插件的离子电容器应用程序。我构建了一个 ionic/cordova 应用程序，一切正常。看来 ionic/capacitor 会干扰 cordova 插件。

使用ionic4 App上传文件的问题

issues with file uploading with ionic4 App

cordova-plugins

angular

ionic4