Загрузка POST-файла из Vue в MongoDB через API rest с использованием fetch () - PullRequest
Новая
       15

Загрузка POST-файла из Vue в MongoDB через API rest с использованием fetch ()

0 голосов
/ 13 июня 2019

В моем компоненте Vue есть форма, которая запрашивает загрузку файла, а затем отправляет файл в REST API с помощью fetch (). Я хотел бы направить файл на mongodb из остальных API.

Я новичок в javascript, typescript, node.js и vue, поэтому я немного заблудился в соусе. У меня есть рабочие маршруты, которые обслуживают список имен, хранящихся в файле JSON, из базы данных в приложение Vue, и рабочие маршруты, которые обслуживают статические файлы из каталога / public через API для приложения Vue.

Форма ввода: 

<input type="file" id="file_upload" accept=".jpg,.png,.pdf" @change="on_file_selected">
<button @click="on_upload">Upload!</button>

TypeScript для обработки формы: 

export default class FileUpload extends Vue {
  private selected_file: any;

 ...

  public on_file_selected(event){
    this.selected_file = event.target.files[0]
  }

  public on_upload(){
    try {
    fetch('http://localhost:5101/content/v1.0/store_file_upload', {
      method: 'POST',
      body: this.selected_file
    }) }
    catch (e) {
      console.log('ERROR: not perpetuated', e);
    }
  }

вызов API REST для публикации на mongoDB. В проекте используется модуль npm формы-данных: 

    router.post(`${RoutesBase.API_BASE_URL}/store_file_upload`, async (req, res) => {

      try {
        const file_to_store = req.body.FormData;
        console.log('req heard');

        const mongo = req.app.get('mongo');
        await mongo.db('content').collection('file_uploads').save(file_to_store, (err: Error, result: any) => {
          if(err) {
            console.log(err);
          }
          res.send('file perpetuated');
        });
      } catch (e) {
        logger.error('ERROR: not perpetuated', e);
      }
    });

И еще кое-что из файла с сервера, которое кажется уместным, основываясь на исследовании, которое я провел до сих пор по этому вопросу: 

const cors         = require('cors');
const bodyParser   = require('body-parser');
...
this.app.use(bodyParser.json());
this.app.use(bodyParser.urlencoded({ extended: true }));

Я использую Robo3T, поэтому я четко вижу, что новая коллекция с загруженным файлом не создается. Это имеет смысл, потому что я получаю сообщение об ошибке: 

TypeError: Cannot read property '_id' of undefined

из API, когда я нажимаю кнопку «загрузить» в компоненте Vue.

Спасибо, что заглянули !! Любое понимание высоко ценится <3 </p>

...