Question

我开始创建一个平均堆栈项目，我的目标是将图片和一些数据存储在数据库中，这是我的后端代码：

控制器：

exports.addArticle = (req, res, next) =>{
    console.log(req.file)
    const article = new Article({
        _id        : new mongoose.Types.ObjectId(),
        title      : req.body.title,
        picture    : (req.file) ? req.file.path : '',
        content    : req.body.content,
    })
    article
        .save()
        .then(result =>{
            console.log(result)
            res.status(201).json({
                message: 'Handling POST request to /articles',
                createdArticle: result
            })
        }).catch(e =>{
            console.log(e)
            res.status(500).json({error: e})
        })
}

型号

 const articleSchema = new mongoose.Schema({
        _id         : mongoose.Schema.Types.ObjectId,
        title       : {type: String, required: true},
        picture     : String,
        content     : {type: String, required: true},
    })

路线：

const storage = multer.diskStorage({
    destination: (req, file, cb)=>{
        cb(null,'./photos/')
    },
    filename: (req, file, cb)=>{
        cb(null, new Date().toISOString()+ file.originalname)
    }
})

const fileFilter = (req, file, cb) => {
  // reject a file
  if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
    cb(null, true);
  } else {
    cb(null, false);
  }
}

const upload = multer(
    {
        storage: storage, 
        limits: 
        {
            fileSize: 1024*1024*5
        },
        fileFilter: fileFilter
    })

router.post('/', upload.single('picture'), articleController.addArticle)

当我使用邮递员时，它的工作与预期的一样，但是当我尝试使用前端表单存储数据时，他们存储的数据中没有图片。

前端模型

export class Article {
    title: string;
    picture: File;
    content: string;
}

前端服务

api = "http://localhost:3000/api/articles";

  addArticle(article) {
    return this.http.post(this.api, article).pipe(map(res => res.json()));
  }

前端组件 article.component.ts

article: Article = {
    title: "",
    picture: null,
    content: "",
  };

  ngOnInit() {

    onSubmit() {

        this.articleService.addArticle(this.article).subscribe(article => {
            this.flashMsg.show("Goood", {
                cssClass: "alert-success",
                timeout: 3000
            });
            this.router.navigate(["/"]);
        });
    }

article.component.html

<form (submit) = onSubmit() enctype="multipart/form-data">
    <div class="form-group">
        <label for="title">Name</label>
        <input type="text" [(ngModel)]="article.title" name="title" class="form-control">
    </div>
    <div class="form-group">
        <label for="picture">Image</label>
        <input type="file" [(ngModel)]="article.picture" class="form-control" name="picture" id="picture">
    </div>
    <div class="form-group">
        <label for="desc">Body</label>
        <input type="text" [(ngModel)]="article.content" name="desc" class="form-control">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

如果我显示要求。 console.log中的文件，向我显示未定义..是什么问题？谢谢

图片与邮递员存储，但不与前端存储

0 个答案: