使用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}}" />