ng2-file-upload 不保存原始文件名答案

【问题标题】：ng2-file-upload Does Not save original file nameng2-file-upload 不保存原始文件名
【发布时间】：2018-03-24 00:20:20
【问题描述】：

我正在使用 ng2-file-upload 插件上传我的文件但是当我上传文件时，它会更改文件名并在数据库中保存不同的文件名，有没有办法获得原始文件名。我需要在我的视图中显示文件的原始名称。

插件链接=https://www.npmjs.com/package/ng2-file-upload

【问题讨论】：

想到一些关于 event.target.files[0].name 的事情
我正在使用 Angular 4，这可以用它吗？你能给我一些链接，我可以看到所有步骤，我是初学者
非常感谢，卡斯滕。它正在工作，你只是节省了我的一天。

标签： angular file-upload angular2-forms ng2-file-upload

【解决方案1】：

如果其他人遇到此问题，那么我将发布我的代码以寻求帮助。我的输入元素只是忽略了参数“31”，我将它用于其他用途。你只需要在参数中传递$event。

<input type="file" ng2FileSelect [uploader]="uploader" placeholder="{{'SALONPROFILE.Trading-Image-Url' | translate}}" (change)="uploadFiles(31,$event)"  name="TradingImageUrl" />

这是我在组件中的函数，我将原始文件名保存在局部变量 this.filenName 中，好在它保存了原始名称。

    uploadFiles(categoryId: number, $event: any) {
    this.uploader.options.additionalParameter = {
        filecategoryId: categoryId,         
    };
    this.filename= $event.target.files[0].name;
    this.uploader.uploadAll();
}

【讨论】：

【解决方案2】：

您还可以在上传之前获取文件名。对于这个 FileUploader 有 onBeforeUploadItem 钩子。

示例：我想将文件名发送到服务器并在发送前更改 URL

const uploader = new FileUploader({
    // options
    url: 'api/files'
});

uploader.onBeforeUploadItem = (item: FileItem) => changeBeforeUpload(item);

const changeBeforeUpload = (item: FileItem) => {
    item.url = `${item.url}/${item.file.name}`;
}

【讨论】：