将文件从FileReader传递到Angular 6中的表单输入

我尝试创建一个UI,其中有一个带有几个文本字段的表单,一个输入类型=“文件”和一个div,您可以删除图像以与表单的其余部分一起上传.

我的目标/逻辑

使用相同的div来删除图像或单击它并打开文件夹资源管理器,如输入类型=“文件”行为.在小屏幕中启用点击是有意义的,实际上不可能“拖放”.并且因为表单中已经有一个输入类型=“文件”,所以没有理由从div中获取图像并将其附加到表单等等.我尝试拍摄在div中删除的图像,设置它作为输入类型=“文件”中的值并提交表单一次. (如果用户点击了div,那么输入类型=“文件”已经有了一个值,所以我可以再次自由提交表单).

这是代码

<div id="imageDrop" (click)='imageInput.click()' (drop)="drop($event)" (dragover)="allowDrop($event)" #imageDrop>
  </div> 
  <input type="file" formControlName="imageInput" required #imageInput id="imageInput" (change)='imageChange($event)' > <!-- use css to hide it -->

因此,当单击imageDrop时,实际上通过(click)=’imageInput.click()’调用imageChange

这是组件中的打字稿.

//imageUpload is the name of the reactive form
acceptedImageTypes = {'image/png': true,'image/jpeg': true,'image/gif': true};
@ViewChild('imageDrop') imageDrop; 

allowDrop(e) {
    e.preventDefault();
  }

  drop(e) {
    e.preventDefault();  
     //clear in case we selected something before via click
    this.imageUpload.controls.imageInput.reset();  
    this.imageDrop.innerHTML="";    
    this.checkfiles(e.dataTransfer.files);
  }

  imageChange(event){    
    this.imageDrop.innerHTML="";   
    this.checkfiles(event.target.files);    
  }//imageChange

  checkfiles(files){      
    if (this.acceptedImageTypes[files[0].type] !== true){
      this.imageDrop.nativeElement.innerHTML="Not an image";          
      return;   
    }
    else if (files.length>1){
      this.imageDrop.nativeElement.innerHTML="Only one image/time";           
      return;   
    }    
    else { this.readfiles(files); }
  }//checkfiles

  readfiles(files){
    const reader = new FileReader();
    let image = new Image();
    reader.onload =  (event) =>{
      this.imageDrop.nativeElement.innerHTML="";                
      let fileReader = event.target as FileReader;
      image.src = fileReader.result;
      image.width = 150; 
      this.imageDrop.nativeElement.appendChild(image);      
    };
    reader.readAsDataURL(files[0]);    

    if (this.imageUpload.controls.imageInput.value==null) {
        //if its null then means that we dragging an img,so the previous image from the input file is deleted
        //now we got to put this image to the input file in order to submit the form
      this.imageUpload.controls.imageInput.reset(files[0] );            
    }    
  }//readfiles

  imageUploadSubmitted(){
    //when form submit,for now just check image value to check if its the right one
    console.log('IMAGE VALUE SUBMIT = =  ',this.imageUpload.controls.imageInput.value);
  }

错误

当我尝试拖放图像时,我得到这个ERROR DOMException：无法在’HTMLInputElement’上设置’value’属性：此输入元素接受一个文件名,该文件名只能以编程方式设置为指向此的空字符串HTML行< div id =“imageDrop”(click)='imageInput.click()'(drop)=“drop($event)”(dragover)=“allowDrop($event)”#imageDrop>但我相信它与此有关

if (this.imageUpload.controls.imageInput.value==null) {
  this.imageUpload.controls.imageInput.reset(files[0] );            
}

readfiles函数的一部分.

任何想法如何解决这个问题,所以文件输入可以得到一个值,然后可以自由提交表单？

谢谢

解决方法

好吧,给你错误的那一行是this.imageUpload.controls.imageInput.setValue(files [0]);

原因是,浏览器将阻止您因安全问题以编程方式设置文件.

相反,您可以直接使用e.dataTransfer.files：

let input = this.imageUpload.controls.imageInput as any;
input.files = files;

Here is a fork of your stackblitz