Question

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

我的项目结构如下所示- 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

使用FormData：

((Node)root.left).left := new Node();

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

1 个答案: