我如何在 Angular 中写博客组件？

Posted 2023-02-24

【中文标题】我如何在 Angular 中写博客组件？

【英文标题】：How can i blog component in Angular?

【发布时间】：2019-09-13 09:32:35

【问题描述】：

我想在 Angular 中创建一个以 Nodejs 作为后端的博客组件， 博客结构包含：图像和描述，我想在一个事件中将其上传到后端（nodejs 和 mongodb）。

主要关心的是如何在一个事件中将图像及其描述一起上传到后端。

【问题讨论】：

就像你在 Angular 中从任何表单发送数据一样，你使用模型来跟踪它？

但我想发送带有表单数据的图像并想使用 multer 但这不会发生在单个请求中

这会帮助你post-form-data

@MuhammadShareyar 但我也想发送一些文本数据，例如带有图片的标题

【参考方案1】：

这是一个简单的例子。

<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()函数来更改输入值，我们将使用它来保存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";
         
);

【讨论】：

你能给我这个代码的链接吗？ PS this.createForm() 在构造函数中也报错

FormData() 没有附加多个文件@MuhammadShareyar

对于多个文件，您需要将其命名为表单中的数组，例如 name=image[]

甚至文件上的设置值也给出错误：无法在“htmlInputElement”上设置“值”属性：此输入元素接受文件名，该文件名只能以编程方式设置为空字符串。

当我选择文件时