Angular/Ionic File 对象构造函数输出格式错误的实例

Question

在新的 Angular 4 项目中，可以从其构造函数创建一个简单的文本 File 对象：

const textfile = new File (['abcd'], 'text.txt')
console.log(textfile)

检查控制台输出（VSCode 控制台）显示预期结果：

File(13) {name: "text.txt", lastModified: 1520684955392, lastModifiedDate: Sat Mar 10 2018 13:29:15 GMT+0100 (Standard romance time…, webkitRelativePath: "", size: 13, …}
    lastModified:1520684955392
    lastModifiedDate:Sat Mar 10 2018 13:29:15 GMT+0100 {}
    name:"text.txt"
    size:13
    type:"text/plain"
    webkitRelativePath:""
    __proto__:File {name: <accessor>, lastModified: <accessor>, lastModifiedDate: <accessor>, …}

新的空白 Ionic 3 项目上的这行代码输出错误放置或错误的 File 接口属性实例（“name”是一个保存文本内容的数组，没有“name”属性，“localURL”包含文件名，“ start”“size”和“end”属性为0，...）。

File {name: Array(1), localURL: "text.txt", type: null, lastModified: null, lastModifiedDate: null, …}
end:0
lastModified:null
lastModifiedDate:null
localURL:"text.txt"
name:Array(1) ["text"]
size:0
start:0
type:null
__proto__:Object {slice: , constructor: }

尝试尽可能简化我的问题，在不同的计算机上进行测试并检查 Angular 和 Ionic 的稳定版本。我已将该项目提供给本地浏览器，以避免设备或模拟器干扰。

我想知道这是否是一种设计行为、Ionic 的 Angular 实现上的错误或此功能的错误使用。

Answer 1

以下方法在 Android 中也适用于我

blobToFileConverison() {
   this.blobToFileConverison(**base64**, 'Filename.xml').then(
   (file: File) => {
      const deltaObj: FormData = new FormData();
      deltaObj.append('file', file, 'Filename.xml');

      /***
        Further code goes here
      **/
   })
}  

async blobToFileConverison(dataUrl: string, fileName: string): Promise<File> {
   const res: Response = await fetch(dataUrl);
   const blob: Blob = await res.blob();
   return this.blobToFile(blob, fileName, new Date());
}

blobToFile(theBlob: Blob, fileName: string, dateGenerated: Date): File {
    const b: any = theBlob;
    //A Blob() is almost a File() - it's just missing the two properties below which we will add
    b.lastModifiedDate = dateGenerated;
    b.name = fileName;

    //Cast to a File() type
    return <File>b;
}

它可能对某人有帮助！

Answer 2

尝试以下代码 -

var fileContent = [];
var blob = new Blob(['abcd'], { type: 'text/plain' });
fileContent.push(blob);  
const textfile = new File (fileContent, 'text.txt', {
  type: 'text/plain',
})
console.log(textfile);

Answer 3

Ionic 只是低效、无价值且无用的堆栈之上的另一层复杂性。在这种情况下，JS -> TS -> Angular -> (cordova - 电容器) -> Ionic。如果您在某些问题上需要帮助，您会发现每一层都在指责其他层。如果您需要一个依赖较少的多平台移动开发工具，最好使用其他不基于 JS 的工具。