如何正确使用 Angular 5 中的 FileSaver？

Question

我正在尝试使用文件上传功能将文件保存到文件系统。由于该文件是 Angular 应用程序所必需的，而不是后端（rest api - java）所必需的，因此我决定将其保存在前端应用程序中，这意味着 Angular 应用程序中的 asset 文件夹内的某个位置。

我已经安装了角度文件保护程序。

模板代码：

<input type="file" name="file-7[]" id="file-7" class="inputfile inputfile-6" (change)="handleFileInput($event.target.files)">

组件代码：

import { FileSaver }  from 'angular-file-saver';

handleFileInput(files: FileList) {
    this.imageUpload = files.item(0);
    this.imageFileName = this.logoToUpload.name;
    // how to use FileSaver here ? 
    //this.imageUpload doesn't have data or something like this 

  }

知道如何将文件实际保存在文件夹中吗？谢谢。

Answer 1

通过安装这些包来使用 Angular Start 触发浏览器 saveAs

\n

npm install file-saver @types/file-saver ngx-filesaver --save\n

\n

将 FileSaverModule 模块添加到您的项目\xef\xbc\x9a

\n

npm install file-saver @types/file-saver ngx-filesaver --save\n

\n

然后在你的组件/服务中

\n

import { FileSaverModule } from \'ngx-filesaver\';\n@NgModule({\n  imports: [ FileSaverModule ]\n})\n

\n

可以blob是文本内容、图像等。

\n

Answer 2

简单的语法是：

  vm.download = function(text) {
    var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
    FileSaver.saveAs(data, 'text.txt');
  };
}

注意该FileSaver.saveAs()方法，它接受Blob参数。

在你的情况下，它可能看起来像：

handleFileInput(files: FileList) {
    this.imageUpload = files.item(0);
    this.imageFileName = this.logoToUpload.name;
    // how to use FileSaver here ? 
    var data = new Blob([imageUpload], { //your file type here });
    FileSaver.saveAs(data, this.imageFileName);  
  }

请注意，您可能还需要将图像转换为 64 位，然后再从 64 位转换回来，以便保存和显示它

完整的示例可以在anguler-file-saver npm 页面找到。