Question

1）我从angular js 5 app上传图片并将其发送到节点js服务器，该文件将存储在uploads文件夹中的节点js服务器上。

2）我在后端使用multer（节点js）将上传的文件存储在服务器上。

3）我分别使用了角度js 5的http和httpclient，但我仍然没有在服务器端上传文件。

4）当我通过postman软件发送上传文件的请求时，它工作正常，但是当我通过角度js 5发送请求时，它无法工作。

＆＃13;

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { HttpHeaders,HttpRequest } from '@angular/common/http';
import {RequestOptions} from '@angular/http';

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent implements OnInit {

  public url: string = "http://localhost:3000/Tasks";   // end point (node js)

  fileToUpload : File = null;

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  fileChange(files : FileList)
  {       
    if(files.length > 0)
    {
      this.fileToUpload = files.item(0);
      console.log(this.fileToUpload.name);
      let formData : FormData = new FormData();
      formData.append('upload file',this.fileToUpload,this.fileToUpload.name);
   
    //  let headers = new Headers();
     // headers.append('Content-Type',undefined);
   
     // let options = new RequestOptions({ headers: headers });

     let headers = new HttpHeaders();
     headers.set('Content-Type','multipart/form-data');
     //let options =  {headers : headers}; 

      this.http.post(`${this.url}/upload`,{formData},{headers})
        .subscribe(
          res => {
            console.log(res);
          },
          err => {
            console.log("Error occured");
          }
        );  

    }   
  }

}

＆＃13;

<div>
  <form  method="post" enctype="multipart/form-data">
    <input type="file" name="file" (change)="fileChange($event.target.files)" placeholder="Upload file"/>
  </form>
</div>

＆＃13;

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { FileUploadComponent } from './file-upload/file-upload.component';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    FileUploadComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

＆＃13;

var express = require('express');
var router = express.Router();
var multer = require("multer");
var Task = require('../models/Task');
//var upload = multer({ dest: '../uploads/' })

var storage = multer.diskStorage({ //multers disk storage settings

    destination: function (req, file, callback) {

        callback(null, './uploads');

    },

    filename: function (req, file, callback) {

        var datetimestamp = Date.now();

        callback(null, file.fieldname + '-' + datetimestamp + '.jpg');

    }

});

var upload = multer({storage: storage}).single('file');

/** API path that will upload the files */

router.post('/upload',function(req, res) {
    res.json({success: 'file uploaded successfuly ...'});
        upload(req,res,function(err){
        console.log('post() ..../////');
        console.log(req.file)
        if(err){

             res.json({error_code:1,nperr_desc:err});

             return;

        }
         res.json({
             error_code:0,err_desc:null,
             success: 'file uploaded successfuly ...'
             
            });           

    });    
 
});


module.exports = router;

＆＃13;

Answer 1

我已设法将文件从角度5发送到带有multer的Nodejs。

确保删除 headers.set（'Content-Type'，'multipart / form-data'）;

不应在请求中应用Content-Type

发送的数据文件名属性 ATTR_NAME formData.append('**ATTR_NAME**', this.fileToUpload, this.fileToUpload.name); 应与<{em> multer({storage: storage}).single('**ATTR_NAME**');

相同
也不需要在帖子请求上使用大括号。它应该是

this.http.post( ${this.url}/upload , formData, {headers: this.setFileHeader() })

其中setFileHeader看起来像这样

setFileHeader() { return new HttpHeaders({ 'Accept': 'application/json', }); }

无法使用post方法通过角度js 5将上传的文件发送到节点js服务器

1 个答案: