使用Loopback进行文件上传

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

我用ajax调用调用loopback 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

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

PS – 根据你的评论 – 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 = function（FileUpload）{var multer = require（’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); }); }; 

};

Answer 3

您可以使用loopback的默认存储组件上传文件/图像。 转到doc链接并按照说明操作，特别查看示例项目如何实现文件上载。

您必须为此目的创建数据源和容器模型。

创建数据源：

 $ lb datasource [?] Enter the data-source name: myfilesystem [?] Select the connector for myfilesystem: other [?] Enter the connector name: loopback-component-storage [?] Install storage (Y/n) 

创建容器模型：

• 型号名称 ：容器
• 数据源 ：myfilesystem
• 基类 ：模型
• 通过REST API公开Reviewer？ 是
• 自定义复数forms（用于构建REST URL） ：是的

Answer 4

这对我使用LoopbackJs很有用

顺便说一句，Loopback框架基于ExpressJs

您可以将此答案视为和修改版本的https://github.com/blueimp/jQuery-File-Upload/ for LoopbackJs

安装插件依赖：

 npm install jquery-file-upload-middleware 

将此代码段添加到/server/server.js：

  //Load Jquery File Upload handler var upload = require('jquery-file-upload-middleware'), bodyParser = require('body-parser'); // configure upload middleware upload.configure({ uploadDir: __dirname + '/public/uploads', uploadUrl: '/uploads', imageVersions: { thumbnail: { width: 80, height: 80 } } }); app.use('/upload', upload.fileHandler()); app.use(bodyParser.raw({ type: 'application/vnd.custom-type' })) 

使用以下代码段修改middleware.js，以便您的应用可以在/ client文件夹中提供静态HTML资源 （此文件属于LoopbackJs框架BTW）：

 ... "files": { "loopback#static": { "params": "$!../client" } } ... 

下载并放入/ client / test file-upload网页： 文件上传网页

运行你的node.app并指向http：// localhost：3000 / files /你应该能够上传文件并在网络选项卡中找到上传的文件名响应：