使用 angular.js 和 node.js 从表单上传照片以及其他信息

Question

在上传照片并将其保存到本地文件夹时需要帮助，使用 node.js、express 和 angular 用于前端。表单完成并将新用户信息保存到猫鼬工作正常。需要添加照片上传部分。 注意：我已经阅读了所有的教程，但我似乎无法将它们中的任何一个与我已经构建的内容集成或使用。请帮忙！

我的项目结构如下所示 - Project folder structure

用于注册表单的控制器文件（node.js 后端）(api/controllers/user.controller.js) -

module.exports.register = function(req, res){

  // Create new user 
  console.log("Registering Users");
  var email = req.body.email;
  var fname = req.body.fname;
  var lname = req.body.lname;
  var password = req.body.password;

  User.create({
      email: email,
      fname: fname,
      lname: lname,
      password: bcrypt.hashSync(password, bcrypt.genSaltSync(10))
    }, function(err, user){
      if(err){
        console.log(err);
        res.status(400).json(err);
      } else {
        console.log("User created", user);
        res.status(201).json(user);
      }
    }
  );
};

index.js 文件（node.js 后端路由）(api/routes/index.js) -

var express = require('express');
var router = express.Router();

var ctrlUsers = require('../controllers/users.controller.js');

router
  .route('/register')
  .post(ctrlUsers.register);

module.exports = router;

app.js 文件（angular.js 前端）（public/angular-app/app.js）

angular.module('login', ['ngRoute']).config(config);

function config($routeProvider){
  $routeProvider
    .when('/', {
      templateUrl: '/angular-app/register/register.html',
      controller: 'RegisterController',
      controllerAs: 'vm'
  })
    .otherwise({
      redirectTo: '/'
    });
}

用于注册表单的控制器文件（angular.js 前端）（public/angular-app/register/register.controller.js）--

angular.module('login').controller('RegisterController', RegisterController);

function RegisterController($http){
  var vm = this;

  vm.register = function(){
    var user = {
      email: vm.email,
      fname: vm.fname,
      lname: vm.lname,
      password: vm.password
    };

    if(!vm.email || !vm.password){
      vm.error = 'Please enter an email and password.';
    } else {
      if(vm.password !== vm.passwordRepeat){
        vm.error = 'Please enter matching passwords.';
      } else {
        console.log(user);
        $http.post('/api/register', user).then(function(result){
          console.log(result);
          console.log(user);
          vm.message = 'Successful login! Hello,' + ' ' + vm.fname + ' ' + vm.lname + '.';
          vm.error= '';
        }).catch(function(error){
          console.log(error);
        });
      }
    }
  }
};

注册表单 HTML 文件 - (public/angular-app/registration/registration.html)

<h1>Welcome!</h1>

<div ng-if="vm.message" class="alert alert-success" role="alert">
  <p>{{ vm.message }}</p>
  <img ngf-src="vm.profilePicture" ngf-size="{width:200, height:200, quality:1.0}"/>
</div>

<div ng-if="vm.error" class="alert alert-danger" role="alert">
  <p>{{ vm.error }}</p>
</div>

<form ng-hide="vm.message" name="register" ng-submit="vm.register()">
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" class="form-control" id="email" placeholder="eg. john.smith@example.com" ng-model="vm.email" autocapitalize="none"/>
  </div>

...some other fields...

  <div class="form-group">
    <label for="profilePicture">Upload Photo</label>
    <input type="file" class="form-control" id="profilePicture" ng-model="vm.profilePicture"/>
  </div>

<button type="submit" class="btn btn-success">Submit</button>
</form>

Answer 1

使用表单数据：

var formData = new FormData()
formData.append("profilePicture",vm.profilePicture);
formData.append("email",vm.email);
formData.append("fname",vm.fname);
formData.append("lname",vm.lname);
formData.append("password",vm.password);

 $http.post('/api/register', formData).then(function(result){
          console.log(result);
          console.log(user);
          vm.message = 'Successful login! Hello,' + ' ' + vm.fname + ' ' + vm.lname +'.';
          vm.error= '';
        }).catch(function(error){
          console.log(error);
        });