Question

我正在使用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）方法中获取文件，但我无法访问里面的本地文件变量那种方法。

Answer 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，您可能也想要更改它取决于您要对文件名执行的操作。或者您可以在组件上获取它并按原样使用它。

Answer 2

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

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

<input type="file" onchange="displayName(this.files)">

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

2 个答案: