dictionary - 使用类属性作为键时的"This operation is insecure"

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

export class FileArgument {
  name: string;
  path: string;
  file: File;
}

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

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作为dict键而引起的，但我不知道为什么。

编辑:从我的服务的postFile()方法如下:

postFile (file: File): Observable<any> {
    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();
                } else {
                observer.error(xhr.response);
                }
            }
        };

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

组件HTML:

<a (click)="modal.open()">
    {{vsmodule.displayName}}
</a>

<modal #modal>
    <form (ngSubmit)="onSubmit()">
        <modal-header [show-close]="true">
            <h4 class="modal-title">Input Module - {{vsmodule.displayName}}</h4>
        </modal-header>

        <modal-body>
            <p>{{vsmodule.description}}</p>
            <hr>
                <ul>
                    <li *ngFor="let arg of vsmodule.args; let i = index">
                        <fieldset *ngIf="arg.type == 'file'">
                            <label>{{ arg.displayName }}</label>
                            <input
                                name="{{arg.name}}"
                                id="{{ arg.name }}"
                                type="file"

                                [(ngModel)]="moduleArguments[arg.name]"
                                (change)="onFileChange($event)"
                            >
                            <p>{{ arg.description }}<p>
                        </fieldset>
                    </li>
                </ul>
        </modal-body>

        <modal-footer>
            <button type="button" class="btn btn-default" data-dismiss="modal" (click)="modal.dismiss()">Dismiss</button>
            <button type="submit" class="btn btn-primary">Run</button>
        </modal-footer>
    </form>
</modal>

最佳答案

在onChange中，fileArgument.name设置为event.originalTarget.id的值-页面中实际HTML元素的ID

和 Chrome 错误说:

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

由于添加了html，因此进行了编辑-将'moduleArguements'属性绑定(bind)到了文件输入元素的ngmodel-结果，更改该值将导致angular尝试并修改文件输入中的value属性，这是不允许的。

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

如果从输入元素中删除ngModel绑定(bind)，则它应该起作用-无论如何，您都在使用onFileChange事件捕获新文件名(尽管在 Controller 中，它只是onChange吗？)