我有一个自定义的 FileArgument 类，我用它来存储有关上传文件的信息:

export class FileArgument {
  tên: chuỗi;
  path: string;
  file: File;
}

我的上传工作正常，然后服务器返回上传文件的路径。然后我想使用先前设置的 fileArgument.name 作为键将此路径存储在字典中。下面是我的组件的简化概述。 onSubmit() 是 Action 发生的地方:

export class InputModuleComponent {
    private vsmodule: InputModule;
    private moduleArguments = {};
    private fileArgument: FileArgument = new FileArgument();

    @Input()
    module: InputModule;

    constructor(private inputModuleService: InputModuleService) {}

    onSubmit(): void {
        this.inputModuleService.postFile(this.fileArgument.file).subscribe(
            response => {
                this.moduleArguments[this.fileArgument.name] = response.filename;
                console.log(this.moduleArguments);
            },
            error => {}
        );
    }

    onFileChange(event): void {
        this.fileArgument.file = event.originalTarget.files[0];
        this.fileArgument.name = event.originalTarget.id;
    }
}

上面的第 14 行 (this.moduleArguments[this.fileArgument.name] = response.filename;) 在 Firefox 中导致以下错误:

EXCEPTION: Uncaught (in promise): SecurityError: The operation is insecure.

在 Chrome 中:

core.umd.js:5995 EXCEPTION: Uncaught (in promise): InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

如果我将该行替换为，例如:

this.moduleArguments['hello'] = response.filename;

我没有收到任何错误。错误显然来自使用 fileArgument.name 作为字典键，但我不知道为什么。

编辑:我的服务中的 postFile() Phương pháp này như sau:

postFile (file: File): Observable {
    console.log('input-module.service - postFile()');
    var url = this.uploadURL;

    return Observable.create(observer => {
        var formData: FormData = new FormData()
        var xhr: XMLHttpRequest = new XMLHttpRequest();

        formData.append("upload", file, file.name);

        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    observer.next(JSON.parse(xhr.response));
                    observer.complete();
                } khác {
                observer.error(xhr.response);
                }
            }
        };

        xhr.open('POST', url, true);
        xhr.send(formData);
    });
}

HTML 组件:

    {{vsmodule.displayName}}



    

        
            
Input Module - {{vsmodule.displayName}}

        

        
            
{{vsmodule.description}}

            
                

                    

                        

                            {{ arg.displayName }}
                            <đầu vào="">
                                name="{{arg.name}}" 
                                id="{{ arg.name }}"
                                type="file"

                                [(ngModel)]="moduleArguments[arg.name]"
                                (change)="onFileChange($event)" 
                            >
                            
{{ arg.description }}

                        
                    

                

        

        
            Dismiss
            Run
        
    

câu trả lời hay nhất

hiện hữu onChange 中，fileArgument.name 被设置为 event.originalTarget.id 的值 - 一个实际 HTML 元素的 id页面

chrome 错误是说:

Failed to set the 'value' property on 'HTMLInputElement'

编辑，因为你添加了 html - 你已经将 'moduleArguements' 属性绑定(bind)到文件输入元素的 ngmodel - 因此，更改该值将导致 Angular 尝试修改文件输入上的值属性，这是不允许的.

更新该值的目的是什么？仅仅是为了反馈给用户吗？

如果您从输入元素中删除 ngModel 绑定(bind)，它应该可以工作 - 您正在使用 onFileChange 事件来捕获新文件名(尽管在 Controller 中它只是 onChange？)

关于dictionary - "This operation is insecure"使用类属性作为键时，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39427719/