如何以角度适当地更改 ng2-file-uploader 的文件名答案

【问题标题】：How to appropriately change the filename for ng2-file-uploader in angular如何以角度适当地更改 ng2-file-uploader 的文件名
【发布时间】：2020-02-01 15:20:14
【问题描述】：

我想通过 ng2-file-uploader 以角度更改图像的名称，然后将其传递给我的 node.js 中的 multer。

一切正常。我能够接收到图像，并且它存储在服务器端的上传目录中。只是我不知道在哪里更改图像名称。我在 onCompleteItem 方法中尝试过，但没有。这是一些代码：

import {  FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';

@Component({
  selector: 'name',
  templateUrl: './some.html',
  styleUrls: [./some.css]
})
export class ComponentName {
  public uploader: FileUploader = new FileUploader({ url: "myurl", itemAlias: 'myPhoto' });

  ngOnInit(){
    this.uploader.onAfterAddingFile = (file) => {};
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
      //create my name
      item.file.name = "my name"
      alert('File uploaded');
    }; 
    this.uploader.uploadAll();
  }
}

我只想更改名称，以便可以将它与我拥有的其他输入值一起存储在我的数据库中。

【问题讨论】：

标签： javascript angular typescript ng2-file-upload

【解决方案1】：

您可以使用onAfterAddingAll 作为解决方法：

 this.uploader.onAfterAddingAll = (files: FileItem[]) => {
        files.forEach(fileItem => {
            fileItem.file.name = fileItem.file.name.replace(/\.[^/.]+$/, "");
            (<any>fileItem).previewUrl = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(fileItem._file)));
        });
    };

【讨论】：

【解决方案2】：

这其实很简单。你几乎明白了，但你选择了错误的方法。您可以在onAfterAddingFile 方法中更改文件名。下面我可以给你看一些代码

import {  FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';

@Component({
  selector: 'name',
  templateUrl: './some.html',
  styleUrls: [./some.css]
})
export class ComponentName {
  public uploader: FileUploader = new FileUploader({ url: "myurl", itemAlias: 'myPhoto' });

  //new name string variable
  newFileName : string;

  ngOnInit(){
    this.uploader.onAfterAddingFile = (file) => {
      //create my name
      file.file.name = "new name";
      //save in variable
      newFileName = file.file.name;
    };
    this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
      alert('File uploaded');
    }; 
    this.uploader.uploadAll();
  }
}

这样您可以传递一个完整的新文件名，或者您可以使用 javascript 的字符串替换方法和正则表达式来替换文件名中的字符。希望这会有所帮助。

【讨论】：