文件上传与回送

Question

我创建了一个简单的文件上传应用程序与回送。 应用程序客户端我使用简单的html和Java脚本代码。

我打电话与AJAX调用回送的API，这是Java脚本代码 -

$('#upload-input').on('change', function() { 

    var files = $(this).get(0).files; 

    if (files.length > 0) { 
     // One or more files selected, process the file upload 
     var form = new FormData(); 

     for (var index = 0; index < files.length; index++) { 

      var file = files[index]; 
      form.append('Uploded Files', file, file.name); 
     } 

     $.ajax({ 
      url: 'api/fileupload/upload', 
      type: 'POST', 
      data: form, 
      processData: false, 
      contentType: false, 
      success: function (data) { 
       console.log('upload successful!'); 
      } 
     }); 
    } 

}); 

但我们不会在服务器端获取文件。在服务器端，我们创建了一个Loopback API。

可以帮助我们，如何上传带有loopback API的文件。

这是我回送API代码 -

FileUpload.remoteMethod 

(
     'upload', { 
      http: { 
       verb: 'post', 
      }, 
      accepts: 
      [ 
       { arg: 'ctx', type: 'object', http: { source: 'context' } }, 
       { arg: 'options', type: 'object', http: { source: 'query' } } 

      ], 
      returns: { 
       arg: 'data', 
       type: 'string', 
       root: true 
      } 
     } 
    ); 

    FileUpload.upload = function (context, options, callback) { 
     //context.req.params = 'common'; 


    }; 

Answer 1

安装multer：https://github.com/expressjs/multer

npm install --save multer 

在MyModel.js

var multer = require('multer'); 
var fs = require('fs'); 

module.exports = function (MyModel) { 
    var uploadedFileName = ''; 
    var storage = multer.diskStorage({ 
     destination: function (req, file, cb) { 
      // checking and creating uploads folder where files will be uploaded 
      var dirPath = 'client/uploads/' 
      if (!fs.existsSync(dirPath)) { 
       var dir = fs.mkdirSync(dirPath); 
      } 
      cb(null, dirPath + '/'); 
     }, 
     filename: function (req, file, cb) { 
      // file will be accessible in `file` variable 
      var ext = file.originalname.substring(file.originalname.lastIndexOf(".")); 
      var fileName = Date.now() + ext; 
      uploadedFileName = fileName; 
      cb(null, fileName); 
     } 
    }); 


    MyModel.upload = function (req, res, cb) { 
     var upload = multer({ 
      storage: storage 
     }).array('file', 12); 
     upload(req, res, function (err) { 
      if (err) { 
       // An error occurred when uploading 
       res.json(err); 
      } 
      res.json(uploadedFileName); 
     });   
    }; 

    MyModel.remoteMethod('upload',   { 
     accepts: [{ 
      arg: 'req', 
      type: 'object', 
      http: { 
       source: 'req' 
      } 
     }, { 
      arg: 'res', 
      type: 'object', 
      http: { 
       source: 'res' 
      } 
     }], 
     returns: { 
      arg: 'result', 
      type: 'string' 
     } 
    }); 
}; 

前端 - 我用AngularJS，所以后面 - https://github.com/nervgh/angular-file-upload

还有其他此类指令可供使用

P.S. - 按照您的评论 - Actually Our Problem is that , we need to upload a File from Client Side and Store this File in Database , But Before save in DB , we need to get files on Server side , if we get Files on Server side via Post API than we can easily store file in DB

不能提供确切的解决方案，但使用上面的方法文件将在/client/uploads文件夹上传，上传一次，那么你有什么用文件来执行控制，一旦一切都做，最终将其删除（可选）

Answer 2

请检查验证码 -

module.exports =功能（文件上传）{VAR = multer要求（ 'multer'）;

FileUpload.remoteMethod(
    'upload', { 
     http: { 
      verb: 'post', 
     }, 
     accepts: 
     [{ 
      arg: 'req', 
      type: 'object', 
      http: { 
       source: 'req' 
      } 
     }, { 
      arg: 'res', 
      type: 'object', 
      http: { 
       source: 'res' 
      } 
     }], 
     returns: { 
      arg: 'data', 
      type: 'string', 
      root: true 
     } 
    } 
); 



var uploadedFileName = ''; 

var storage = multer.diskStorage({ 
    destination: function (req, file, cb) { 
     // checking and creating uploads folder where files will be uploaded 
     var dirPath = 'client/uploads/' 
     if (!fs.existsSync(dirPath)) { 
      var dir = fs.mkdirSync(dirPath); 
     } 
     cb(null, dirPath + '/'); 
    }, 
    filename: function (req, file, cb) { 
     // file will be accessible in `file` variable 
     console.log("----------Second Rakesh---"); 
     console.log(file); 
     var ext = file.originalname.substring(file.originalname.lastIndexOf(".")); 
     var fileName = Date.now() + ext; 
     uploadedFileName = fileName; 
     cb(null, fileName); 
    } 
}); 






FileUpload.upload = function (req, res, callback) { 

    var upload = multer({ 
     storage: storage 
    }).array('file', 12); 

    upload(req, res, function (err) { 
     if (err) { 
      // An error occurred when uploading 
      res.json(err); 
     } 
     console.log("-------------Rakesh"); // Its Printing Rakesh 

     res.json(uploadedFileName); 
    }); 
}; 

};