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

Question

我正在后端使用Spring Boot的Angular2应用程序上工作。 在应用程序中，具有在服务器上上传文件的功能。 上传文件的代码工作正常。

我正在使用ngf-select选择文件。 当文件名不包含特殊字符时，它可以很好地工作。

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

当我选择具有特殊字符（例如我的名字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上传具有特殊字符的文件的问题？

Answer 1

如下添加过滤器

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

和以下html

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