Question

我有一个角度为6的反应形式，我尝试使用它来提交图像和一些文本字段。

在这里

<form [formGroup]="imageUpload" (ngSubmit)="imageUploadSubmitted()" method="post" enctype="multipart/form-data" >
  <div id="imageDrop" (click)='imageInput.click()' (drop)="drop($event)" (dragover)="allowDrop($event)" #imageDrop></div> 
  <input type="file" formControlName="imageInput" required #imageInput id="imageInput" name = 'image' (change)='imageChange($event)' accept=".png, .jpg, .jpeg, .gif" > <!-- hide with css -->
    <input type="text" formControlName="imageName" placeholder="name" required >
  <button type="submit" >Submit</button>
</form>

因此，您可以单击放置区域，文件选择器将打开-或放置图像。

无论哪种方式，获取图像并将其保存在变量中。

  selectedFile:File=null;

  drop(e) {
    e.preventDefault();  
    this.imageUpload.controls.imageInput.reset();  
    this.selectedFile = e.dataTransfer.files[0];
    this.checkfiles(e.dataTransfer.files);
  }

  imageChange(e){        
    this.selectedFile = e.target.files[0];
    this.checkfiles(e.target.files);    
  }

检查所选文件

   acceptedImageTypes = {'image/png': true,'image/jpeg': true,'image/gif': true};
  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); }
  }

酷，现在准备图像预览并将其附加到放置区域

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

好，现在提交表单后，将selectedFile设置为文件输入值并提交表单。

首先，我尝试通过更改其imageInput来设置value的值。然后，我还尝试使用selectedFile值附加一个新的表单控件。

两个控制台日志都显示一个正确的图像对象，但是当它们到达nodejs v8.11.1时，它们显示为空。

我还尝试创建一个默认的HTML5表单数据对象（名为fd）并将其发送到同一服务上。 这也显示为空

  imageUploadSubmitted(){
    let input = this.imageUpload.controls.imageInput as any;        
    input.value = this.selectedFile;  
    this.imageUpload.addControl('newImage', new FormControl(this.selectedFile));
    console.log('imageInput value = ',this.imageUpload.controls.imageInput.value);
    console.log('newImage value = ',this.imageUpload.controls.newImage.value);    
    //const fd = new FormData();
    //fd.append('image', this.selectedFile, this.selectedFile.name);
    this.mapcmsService.uploadImage(this.imageUpload.value).subscribe((data) =>{
      if(data.success){                  
        alert('ok');
      }
      else{
        alert('nope');
      }
    })
  }

这是我的服务

  uploadImage(data){
    let headers = new Headers();
    headers.append('Content-Type','application/json');
    headers.append('Authorization',this.cma_token);
    return this.http.post('http://localhost:3000/cms/map/upload/image', data, {headers:headers}).pipe(map(res => res.json()));
  }

这是我的节点代码，我想在其中使用强大的功能，但是我没有要处理的值，因此由于没有值，所以我得到未定义path的错误。

router.post('/upload/image',validate.required(),(req, res)=>{ 
  console.log('FILES - ',req.body);//<< all files appear empty

  let oldpath;
  let newpath;
  let textDate = String(Date.now());
  let newname ;
  let type;
  const form = new formidable.IncomingForm();
  form.parse(req, function (err, fields, files) {    

    oldpath = files.imageInput.path;//ofcourse gives an error and crash node
    newpath = path.join(__dirname, '/angular-src/src/app/assets/images/',newname) ;
    newname = textDate+files.imageInput.name;
    type = files.imageInput.type;
  });

});

此路由具有validate中间件，用于检查用户令牌。用户令牌在服务的标题中设置。

因此，在前端，文件值看起来还可以，但是服务器中没有任何值。我的前端看起来很好，服务器代码基于强大的示例。

那怎么了？服务？一些节点参数？安全问题？请帮我调试一下。我找不到错误，所以这就是为什么我要详细说明的原因。

谢谢

Answer 1

如您所说：

//const fd = new FormData();

//fd.append('image', this.selectedFile, this.selectedFile.name);

您的请求数据应为服务器期望的FormData，并且应该可以正常工作。如果不是，请提供服务器端代码部分，然后将看到。

您能否提供plnkr或stackblitz示例？不确定您通过POST请求传递的确切信息

无法从角度获取节点上的图像

1 个答案: