角和节点：发送图像

Question

 handleFileInput(files: FileList) {
    var filename = files.item(0);
    this.upload(filename).subscribe();
};


upload(fileToUpload: File){   
  console.log(fileToUpload); //Here I can see all the image data     

  let obj = {
        imageData: fileToUpload,
        imageID: "Sample"
  };

  return this.http.post<any>(url, obj ,{});
}

private initAPI(): void {
    this.router.route('/file')
        .post((req, res) => {
            console.log(req);   //No "body" data             
       });
}

body:
   imageData: Object {}
   imageID: "Sample"

ImageData为空。对如何发送图像有什么建议吗？

谢了。

Answer 1

这可以在angular端使用formData来完成，在node端使用multer来上传文件。

角部

component.html

<div>
  <div>
    <input type="file" (change)="createFormData($event)">
  </div>
  <button (click)="upload()">Upload</button>
</div>

  selectedFile: File = null;
  fd = new FormData();

  constructor(private http: HttpClient) {}

  createFormData(event) {
    this.selectedFile = <File>event.target.files[0];
    this.fd.append('file', this.selectedFile, this.selectedFile.name);
  }

  upload() {
    this.http.post(url, this.fd)
    .subscribe( result => {
      console.log(result)
    });
  }

const express = require('express');
const router = express.Router();
var multer = require("multer");
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, './upload')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
    }
})
const upload = multer({
    storage: storage
})

router.post('url',  upload.single('file'), (req, res) => {
  // the file is uploaded when this route is called with formdata.
  // now you can store the file name in the db if you want for further reference.
  const filename = req.file.filename;
  const path = req.file. path;
  // Call your database method here with filename and path
  res.json({'message': 'File uploaded'});
});

module.exports = router;