Question

我有一个用于在角度5应用程序中上传文件的表单，并且因为我刚刚从我之前编写的代码中复制了它，我可以发誓以前曾经使用过。

这是我的HTML代码：

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];
    }
  }

这是fileUpload控件中使用的“onFileChange”方法：

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;

    }
}

以下是我编写和使用的自定义验证器的代码：

从'@ angular / forms'导入{FormControl};

/usr/sbin/update-info-dir: 3: /etc/environment: Syntax error: Unterminated quoted string

现在问题是我在输入控件中选择一个文件时，我在控制台中收到此错误消息：

错误DOMException：无法设置'value'属性 'HTMLInputElement'：此输入元素接受可能的文件名只能以编程方式设置为空字符串。

此代码以前有效，所以我不知道从哪里开始。任何帮助表示赞赏！

注意：以下是工作答案的链接：Angular2: validation for <input type="file"/> won't trigger when changing the file to upload

Answer 1

与错误一样，您只能将空字符串设置为文件输入值以清除选择。否则它可能会带来安全风险。我无法想象代码是如何运作的。也许在一些非标准（坏）浏览器？

如果您只删除该行，那么该代码是否有效？为什么您需要将相同的值设置为它已经存在的输入？

编辑：似乎需要自定义ValueAccessor来验证文件输入。另一个答案的解决方案：Angular2: validation for <input type="file"/> won't trigger when changing the file to upload

Answer 2

请勿将输入属性的值设置为所选文件。相反，只需将文件内容设置为变量，然后分别附加到请求对象即可。对于文件输入，只需将even.target.value分配为输入值，以便用户看到所选的实际文件。

Answer 3

就我而言，我只是删除了formControlName：

<input type="file" (change)="onFileChange($event)">

和.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();
      };
    }
  }

Answer 4

首先，您应该从元素中删除文件“ formControlName”，因为它是字符串然后在您的ts文件中添加此

if (event.target.files && event.target.files.length > 0) {
  const file = (event.target.files[0] as File);
  this.yourForm.get('image').setValue(file);
  console.log(this.yourForm.get('image').value);

Answer 5

通过为文件提供2个输入来实现此目的。这是我的操作方式：

  this.quickForm = this.formBuilder.group({
      fileSource: ['', Validators.required],
      fileName: '',
    })

HTML

<input type="file" formControlName='fileSource' (change)="onFileSelected($event)"/>

打字稿

  onFileSelected(event) {
    if(event.target.files.length > 0) 
     {
       this.quickForm.patchValue({
          fileName: event.target.files[0],
       })
     }
  }

submit(){
    const formData = new FormData();
    formData.append('file', this.myForm.get('fileName').value);
   // formData.append('file', this.myForm.get('anotherInput').value);
   
    this.http.post('http://localhost:8001/upload.php', formData)
      .subscribe(res => {
        console.log(res);
        alert('Uploaded Successfully.');
      })
  }

Angular 5文件上传：无法在'HTMLInputElement'上设置'value'属性

5 个答案: