使用类属性作为键时,"此操作不安全"

Question

我有一个自定义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.namedict键,但我不明白为什么.

编辑: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”属性绑定到文件输入元素的 ngmodel - 因此，更改该值将导致 Angular 尝试修改文件输入上的 value 属性，这是不允许的。

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

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