Html Angular 5 文件上传：无法在“HTMLInputElement”上设置“value”属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49970970/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 5 file upload: Failed to set the 'value' property on 'HTMLInputElement'
提问by Behrooz
I have a form for uploading a file in an angular 5 app, and as I have copied it exactly from a code I had written a while ago, I can swear it had worked before.
我有一个用于在 angular 5 应用程序中上传文件的表单，因为我完全从前一段时间编写的代码中复制了它，所以我可以发誓它以前工作过。
Here is my HTML code:
这是我的 HTML 代码：
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>File:</label>
<input #theFile type="file" (change)="onFileChange($event)" accept=".png" class="form-control"
formControlName="content" />
<input type="hidden" name="fileHidden" formControlName="imageInput"/>
<!-- [(ngModel)]="model.content" -->
<div class="alert alert-danger" *ngIf="!form.prestine && form.controls.content.errors?.noFile">
Please provide a photo.
</div>
<div class="alert alert-danger" *ngIf="form.controls.content.errors?.fileTooBig">
The file is too big and won't uploaded. Maximum allowed size is 500kb.
</div>
</div>
<div class="form-group">
<label>Notes</label>
<textarea type="text" class="form-control" formControlName="notes" [(ngModel)]="model.notes" > </textarea>
</div>
<button type="submit" class="btn btn-primary" [disabled]="!form.valid">Submit</button>
<button class="btn btn-default" type="button" (click)="close(false);">Cancel</button>
</form>
Here is the "onFileChange" method used in the fileUpload control:
下面是 fileUpload 控件中使用的“onFileChange”方法：
onFileChange($event)
{
if ($event.target.files.length > 0)
{
let ftu: File = null;
ftu = $event.target.files[0];
this.form.controls['content'].setValue(ftu);
this.model.content = $event.target.files[0];
}
}
and here is the code for the custom validator I have written and used:
这是我编写和使用的自定义验证器的代码：
import { FormControl } from '@angular/forms';
从“@angular/forms”导入{FormControl}；
export class SekaniRootImageValidators
{
static sizeTooBig(control: FormControl)
{
if (!control.value)
{
return { noFile : true }
}
else if (control.value[0].size > 505000)
{
return { fileTooBig: true}
}
return null;
}
}
Now the issue is as soon as I select a file in the input control, I get this error message in the console:
现在的问题是，只要我在输入控件中选择一个文件，就会在控制台中收到此错误消息：
ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
错误 DOMException：无法在“HTMLInputElement”上设置“value”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。
This code has worked before, so I have no idea where to even start. Any help is appreciated!
这段代码以前工作过，所以我不知道从哪里开始。任何帮助表示赞赏！
ATTENTION:Here is a link to a working answer: Angular2: validation for <input type="file"/> won't trigger when changing the file to upload
注意：这是一个工作答案的链接：Angular2：在更改要上传的文件时不会触发 <input type="file"/> 验证
回答by funkizer
Like the error is saying, you can only set an empty string to a file input value to clear the selection. It could open security risks otherwise. I can't imagine how that code could've ever worked. Maybe in some non-standard (bad) browser?
就像错误所说的那样，您只能将空字符串设置为文件输入值以清除选择。否则，它可能会带来安全风险。我无法想象该代码是如何工作的。也许在一些非标准（坏）浏览器中？
Shouldn't that code work if you just remove the line, why do you need to set the same value to the input that it already has anyway?
如果您只是删除该行，该代码不应该工作，为什么您需要为它已经拥有的输入设置相同的值？
Edit: seems a custom ValueAccessor is needed for validating file inputs. Solution in another answer: Angular2: validation for <input type="file"/> won't trigger when changing the file to upload
编辑：似乎需要自定义 ValueAccessor 来验证文件输入。另一个答案中的解决方案：Angular2：在更改要上传的文件时不会触发 <input type="file"/> 验证
回答by NicuVlad
In my case I just removed the formControlName:
就我而言，我只是删除了 formControlName：
<input type="file" (change)="onFileChange($event)">
And .ts:
和.ts：
onFileChange(event) {
const reader = new FileReader();
if (event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
this.data.parentForm.patchValue({
tso: reader.result
});
// need to run CD since file load runs outside of zone
this.cd.markForCheck();
};
}
}
回答by voddy
Do not set the value of the input property to the selected file. Instead just set the file content into a variable and append to the request object separately. For the file input , just assign the even.target.value as the input value, so the user see the actual file selected.
不要将输入属性的值设置为所选文件。相反，只需将文件内容设置为变量并单独附加到请求对象。对于文件 input ，只需将 even.target.value 指定为输入值，这样用户就可以看到实际选择的文件。
