使用Angular ngf-select上传名称中具有特殊字符的文件答案

【问题标题】：Upload file having special character in name using Angular ngf-select使用Angular ngf-select上传名称中具有特殊字符的文件
【发布时间】：2017-06-01 21:24:19
【问题描述】：

我正在使用后端的 spring boot 开发 Angular2 应用程序。在应用程序中有在服务器上上传文件的功能。上传文件的代码工作正常。

我正在使用ngf-select 选择文件。文件名不带特殊字符时效果很好。

<input type="file" name="file" ng-model="obj.fileModel" ngf-select accept="file_extension">

当我选择具有特殊字符的文件时出现问题，例如 my name neelam shrma @@ !! %%% ggg %.json

上传js代码是：

var formData = new FormData();
formData.append("fileObj", obj.fileModel);
UploadFile.save(formData, onUploadSuccess, onUploadError);

由于文件 obj.fileModel 中的 File 对象带有特殊字符名称，所以它不会调用资源方法来上传文件

我也尝试过使用编码更新文件名，但由于文件对象是只读的，所以不允许我更改名称，还创建了具有编码文件名的新文件对象，但没有奏效.

资源方法：

public boolean uploadMyFile(MultipartFile mpfile) throws IOException {
...
....
 File file = new File(myFolder + File.separator + file.getOriginalFilename());               
 mpfile.transferTo(file);
......
......
}

所以具有特殊字符的文件没有调用我的资源方法：uploadMyFile(..) 并抛出 500 服务器错误。

如何解决使用angularJs ngf-select上传文件有特殊字符的问题？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

添加如下过滤器

.filter('decodeURL', function () {
    return function (text) {
        if (text) {
            return window.encodeURIComponent(text);
        }
    }
});

及以下html

<img src="{{itemDetails.LargeImageName | decodeURL}}" />

【讨论】：

此过滤器不起作用，我无法更新模型中设置的文件对象。