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

最新推荐文章于 2022-06-24 17:13:30 发布

原创

最新推荐文章于 2022-06-24 17:13:30 发布 · 8.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Angular #File #Input

在使用Angular 6进行图片上传时遇到问题，错误提示为'Failed to set the 'value' property on 'HTMLInputElement'。原因在于file类型的input元素出于安全考虑其value属性是只读的。解决方案是在不使用[(ngModel)]双向绑定的情况下，通过JavaScript设置文件值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近使用 Angular 进行图片上传时碰到这个问题
在这里插入图片描述

这是我页面的代码，使用的是 angular 6 版本：
在这里插入图片描述

百度了一下，原因是出于安全限制，file 的value 是只读的，只能由用户选择或手动输入，不允许由程序代码设置，所以在JS中修改 file 的 value 会爆出此错误信息。但是在网上百度一堆发现都是jQuery的解决方法并没有找到使用 angular 的，只好翻墙去 google。最后在 https://github.com/angular/angular/issues/6074 找到了解决方法，
在这里插入图片描述
只需去掉 [(ngModel)] 双向绑定，然后在JS中把值绑定一下就可以了，特意在此记录一下。

HTML代码如下

<div class="rowTabsOneDiv rowTabsOneDiv-full-width rowTabsOneDiv-tall-height">
	<span>圖像:</span>
	<section class="gz-full-img">
		<img *ngIf="frontImgOp" src="{
   
   {modelTwoChild.productOptionImagePath}}" />
		<img *ngIf="!frontImgOp" [src]="frontImg.src" (click)="selectImg(frontImgFile)" />
		<input class="file" type="file" #frontImgFile (change