Multer и узел / express загрузка файла не работает с Angular - PullRequest
Новая
       66

Multer и узел / express загрузка файла не работает с Angular

0 голосов
/ 17 января 2020

Я пытаюсь загрузить один файл, используя multer. Хотя я могу загрузить файл вручную в соответствующую папку, используя такие инструменты, как почтальон для тестирования маршрута express, я не могу загрузить его, используя Angular внешний интерфейс. Я создал папку с именем uploads в внутренней папке узла, куда файлы должны быть загружены. Также мне нужно загрузить файл в форму и передать его в API, где он должен взять файл вместе с другими параметрами. Но, к сожалению, он возвращает статус 500 с внутренней серверной ошибкой на консоли браузера, в то время как на терминале моего узла он возвращает Невозможно прочитать свойство 'путь' из неопределенного.

Код моего узла, который работает нормально, ниже: 

const multer = require('multer')

const storage = multer.diskStorage({

destination: function(req, file, cb) {

cb(null, './uploads/')

},

filename: function(req, file, cb) {

cb(null, Date.now() + file.originalname)

}

})

const upload = multer({storage: storage})

let baseUrl = appConfig.apiVersion+'/blogs';

app.post(baseUrl+'/create', upload.single('imagePath'), (req, res) => {
    var today = time.now()
    let blogId = shortid.generate()

    let newBlog = new BlogModel({

        blogId: blogId,
        title: req.body.title,
        description: req.body.description,
        bodyHtml: req.body.blogBody,
        isPublished: true,
        category: req.body.category,
        author: req.body.fullName,
        created: today,
        lastModified: today,
        imagePath: req.file.path    //node console is pointing towards this point
    }) // end new blog model

    let tags = (req.body.tags != undefined && req.body.tags != null && req.body.tags != '') ? req.body.tags.split(',') : []
    newBlog.tags = tags

    newBlog.save((err, result) => {
        if (err) {
            console.log(err)
            res.send(err)
        } else {
            res.send(result)

        }
    }) // end new blog save
});

Ниже мой Angular Код компонента, который не работает: 

selectImage(event) {
    if(event.target.files.length > 0){
      const file = event.target.files[0];
      this.images = file;
    }
  }

  public createBlog(): any {

    const formData = new FormData();
    const form = formData.append('imagePath', this.images);


    let blogData = {
      title: this.blogTitle,
      description: this.blogDescription,
      blogBody: this.blogBodyHtml,
      category: this.blogCategory,
      imagePath: form 
    } //end blogData

    console.log(blogData);

    this.blogHttpService.createBlog(blogData).subscribe(

      data => {
        console.log(data);
        this.toastr.successToastr('Blog Posted Susseccfully!', 'Success!');
        setTimeout(() =>{
          this.router.navigate(['blog', data.blogId]);
        }, 1000)

      },

      error => {
        console.log(error);
        console.log(error.errorMessage);
        this.toastr.errorToastr('This is not good!', 'Oops!');
      })
  }

Angular Сервисный код 

public createBlog(blogData): any {
    let myResponse = this._http.post(this.baseUrl + '/create', blogData);
    return myResponse;

  }

Внешний интерфейс HTML Код: 

<div>

<input type="file" name="imagePath" (change)="selectImage($event)" />

</div>

1 Ответ

1 голос
/ 17 января 2020

Похоже, вы создали объект formData, но на самом деле вы ничего с ним не делаете. Как вы можете видеть здесь, вы создаете объект и отправляете его вместе со своим запросом, но он не включает ваш formData

let blogData = {
      title: this.blogTitle,
      description: this.blogDescription,
      blogBody: this.blogBodyHtml,
      category: this.blogCategory,
      imagePath: this.imagePath
    } //end blogData

    console.log(blogData);

    this.blogHttpService.createBlog(blogData).subscribe(

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

changeHandler(e) {
    const fd = new FormData();
    fd.append('sample', e.target.files[0]);
    axios.post('/save-image', fd).then(i => {
      this.setState({img: i.data.filename});
    });
  }

Как вы можете видеть, formData - это то, что я на самом деле отправляю на сервер.

...