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

Question

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

export class FileArgument {
  name: string;
  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() 方法如下:

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>

Answer 1

在 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？)