Angular ngx-img-cropper：如何获取上传图像的文件名？答案

【问题标题】：Angular ngx-img-cropper: How do I get the filename of the uploaded image?Angular ngx-img-cropper：如何获取上传图像的文件名？
【发布时间】：2018-04-25 07:13:47
【问题描述】：

我正在使用 ngx-img-cropper，https://github.com/web-dave/ngx-img-cropper。如何获取要上传到应用程序的文件的名称？这是我的html代码。

<img-cropper #cropper [image]="data" [settings]="cropperSettings"></img-cropper><br>

我有名为 data: any 和cropper: ImageCropperComponent 的变量，但 ImageCropperComponent 没有文件名属性。

如果我查看 ngx-img-cropper github 页面，src/imageCropperComponent.ts 确实在 fileChangeListener($event: any) 方法中获取了文件，但我无法访问内部的本地文件变量那个方法。

【问题讨论】：

标签： angular

【解决方案1】：

在你的组件中试试这个，这不应该改变组件行为。

...

@ViewChild('cropper') myCopper: ImageCropperComponent;

ngAfterViewInit() {
  if(this.myCopper) {
    const olfOnFileChange = this.myCopper.fileChangeListener.bind(this.myCopper);
    this.myCopper.fileChangeListener = (event) => {
       if ($event.target.files.length === 0) return;
       // here should be your file name
       let fileName: File = $event.target.files[0].name; 
    olfOnFileChange(event);


  }
}

...

还有其他功能 setImage，您可能也想更改它取决于您要对文件名执行的操作。或者，您可以将它放在您的组件上并按原样使用。

【讨论】：

太好了，工作！要改变的东西，'myCopper' 到 'myCropper'。

【解决方案2】：

这与裁剪器无关，与您处理文件上传的方式有关。这是上传后如何获取文件名的方法。当然，通过在您的组件中创建一个函数并将您的输入绑定到该函数（change 事件）来适应您的情况

displayName = (files) => {
  const file = files.item(0);
  console.log('File name is', file.name);
}

&lt;input type="file" onchange="displayName(this.files)"&gt;

【讨论】：

这是我的问题，我不处理文件上传。它位于 ImageCropperComponent 内部。 github.com/web-dave/ngx-img-cropper/blob/master/src/…
我知道这个库经常使用它，而且我知道你可以自己处理文件上传。这就是我获取文件名的方式。