Question

我的Vue组件中有一个表单，提示文件上传，然后使用fetch（）将文件发送到REST api。我想将文件从其余的api路由到mongodb。

我是javascript，typescript，node.js和vue的新手，所以我有点不知所措。我有一些工作路线，这些路线提供了从数据库到Vue应用程序的JSON文件中存储的名称列表，还有一些工作路线，它们从/ 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);
    }
  }

REST API调用以发布到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

当我单击Vue组件中的“上传”按钮时，从API中

。

谢谢您的光临！！任何见解都受到高度赞赏<3

使用fetch（）

0 个答案: