Как я могу блог компонент в Angular? - PullRequest
Новая
       22

Как я могу блог компонент в Angular?

0 голосов
/ 24 апреля 2019

Я хочу сделать компонент блога на Angular с Nodejs в качестве бэкэнда, структура блога содержит: изображение и описание, и я хочу загрузить его в виде отдельного события в бэкэнд (nodejs и mongodb).

Основная проблема заключается в том, как загрузить изображение и его описание вместе в одном событии на сервер.

1 Ответ

1 голос
/ 28 апреля 2019

Вот простой пример. 

<form
  [formGroup]="angForm" novalidate (submit)="createBlog(angForm)" enctype="multipart/form-data">
   <div class="form-group">
     <textarea class="form-control form-control-lg" placeholder="Create a post" formControlName="data" #data  ></textarea>
   </div>
   <div class="form-group">
    <inpu type="file" name="image" name="image" #image (change)="onFileSelect($event)"/>
   </div>
   <button type="submit class="btn btn-dark" [disabled]="angForm.pristine || angForm.invalid" > Submit</button>
 </form>

Вот простой angular reactive form, который мы используем для проверки обязательных полей, и мы определили функцию onFileSelect() для изменения входного значения, которое мы будем использовать дляsave formData

файл blog.ts 

 import { FormBuilder, FormGroup, Validators } from "@angular/forms";

 angForm: FormGroup;

 //our constructor 
 constructor(
   private fb: FormBuilder,
   private http: HttpClient
  ) {
      this.createForm();
    }

 //reactive form group and set validations for required field
 createForm() {
   this.angForm = this.fb.group({
   data: [null, Validators.required],
   image: [""]
  });
 }

 createBlog(form) {
 const formData = new FormData();
 formData.append("image", this.angForm.get("image").value);
 formData.append("data", this.angForm.get("data").value);

 this.http
   .post("http://localhost:3000/blog/create", formData)
   .subscribe(res => {
     console.log(res);
   });
 }

  //on change event we append file to formdata
  onFileSelect(event) {
   if (event.target.files.length > 0) {
   const file = event.target.files[0];
   this.angForm.get("image").setValue(file);
  }
 }

Для сохранения файлов в nodejs вам необходимо использовать пакет multer и body-Parser для сохранения текстовых данных 

 const multer = require("multer");
 const upload = multer({ dest: "public/images/" }); //desired path to save file
//your post route to save data
router.post( "/create",upload.single("file"),(req, res) => { 
 if (req.file) {
     //creating instance of new blog 
      const newBlog = new Blog({
      desc: req.body.data,
      image: req.file.filename
    });

    //save blog data and image name into db
    newBlog.save().then(blog => {
       res.json(blog);
     // return response 
    });
   } else throw "error";
  }       
);
...