Загрузка изображения с помощью vuejs на Nodejs Server не работает - PullRequest
Новая
       9

Загрузка изображения с помощью vuejs на Nodejs Server не работает

0 голосов
/ 19 сентября 2018

Отправка данных формы с текстовым содержимым на сервер Nodejs из внешнего интерфейса vuejs, но файл никогда не загружается на сервер.Я был стеком некоторое время сейчас.Вот мой подробный код передней и внутренней сторон:

Front End 

//Front end VueJS

Компонент формы загрузки 

<template>
<div class="container">
<form v-on:submit.prevent="addMember" method="post">

<div class="row">
   <div class="col-sm-10 col-md-10 col-lg-10">
       <div class="form-group">
            <label>Title<span class="required-field">*</span>:</label>
            <input type="text" class="form-control" v-model="member.title" name="title" v-validate="'required|min:10'">
            <div class="help-block alert alert-danger" v-show="errors.has('title')">
            {{errors.first('title')}}
            </div>

          </div>
   </div>
   </div>

   <div class="row">
   <div class="col-sm-10 col-md-10 col-lg-10">
       <div class="form-group">
            <label>Full Name<span class="required-field">*</span>:</label>
            <input type="text" class="form-control" v-model="member.fullname" name="fullname" v-validate="'required|min:10'">
            <div class="help-block alert alert-danger" v-show="errors.has('fullname')">
            {{errors.first('fullname')}}
            </div>

          </div>
   </div>
   </div>

   <div class="row">
   <div class="col-sm-10 col-md-10 col-lg-10">

       <div class="form-group">
              <label>Passport Photo
        <input type="file" id="file" ref="photo" v-on:change="handleFileUpload()"/>
      </label>           

      </div>
   </div>
   </div>

</form>

<div class="row">
   <div class="col-sm-10 col-md-10 col-lg-10">
    <div class="form-group">
 <button class="btn btn-info btn-lg pull-right">Save</button>
   </div>
   </div>
   </div>
   </div>
   </template>

   <script>
  export default {
  name:'CreateMember',

    data(){
        return{

            member:{},
            photo:'',
        }
    },



    },

    methods: {

        handleFileUpload(){
        this.coverimage = this.$refs.photo.files[0]
        },


 addMember(){

       this.$validator.validateAll().then(()=>
      {

      let formData = new FormData();
      formData.append('file', this.photo);
      let rawData = this.member
      rawData = JSON.stringify(rawData)
      formData.append('data',rawData)
     this.axios.post('/members',this.member,{
      'content-type':'multipart/form-data'
      }).then((resp)=>{
      console.log(resp.data)
      //this.$router.push({name: 'members'})

      }).catch((error)=>{
      console.log(error)
      })

    });

  }
  }
}
</script>

Back End (Nodejs и Express) 

**routes/members.js**

var express = require('express');
var router = express.Router();
//Require Controller Modules
var controller = require('../controllers/MembersController');
var auth = require('../middleware/auth');
const path = require('path');
const multer = require('multer');

//Define file storage engine
const storage = multer.diskStorage({

    destination:'public/uploads/',

    filename: (req,file,cb)=>{
      cb(null,file.fieldname+'-'+Date.now()+path.extname(file.originalname));
    }

  });
//Filter uploaded file and only upload file types of enumerated format
const fileTypeFilter = (req, file, cb)=>{
    if(file.mimetype==='image/jpeg'||file.mimetype==='image/jpg'|| file.mimetype==='image/png'){
        cb(null, true);

    }
    else{
    cb(new error('Invalid Image Format'), false);

    }
}
const upload = multer({storage:storage,
    limits:
    {
        fileSize:1024var express = require('express');
var router = express.Router();
const fs = require('fs');
const Model = require('../models/index');
const Member = Model.sequelize.import('../models/member');

//createMember Controller Method

exports.createMember = function(req, res, next) {

        //Check if the cover image is attached
if(!req.file)
{
  return res.status(400).json({message:'Attach Photo!'}); //The request is returning this response, meaning the file is never uploaded. And the file actually is not being uploaded
}
     Member.create({
            title: req.body.title,
            fullname : req.body.fullname,
            photo : req.body.req.file.path           
        }).then(member=>{
          res.json(member);
        }).catch((error)=>{
          return res.json({status:500,error:error});
        });

        };
1000 }, filefilter:fileTypeFilter }); //Save new member to the database router.post('/members', upload.single('photo'),auth,controller.createMember);

Controllers/MembersController.js

*1024*

Удалениефайл из запроса, остальные данные сохраняются в базе данных, как и ожидалось

Модель 

//Models/member.js

'use strict';
module.exports = (sequelize, DataTypes) => {
  var Member = sequelize.define('Member', {
    fullname: DataTypes.STRING,
    photo: DataTypes.STRING
  }, {});
  Member.associate = function(models) {
    // associations can be defined here
  };
  return Member;
};

Что может быть не так.Каталог загрузки пуст.пожалуйста, помогите мне.

...