Question

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

我用ajax调用调用loopback api，这是Java Script代码 -

$('#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 = 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的默认storage component上传文件/图片。转到doc link并按照说明操作，特别查看示例项目如何实现文件上传。

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

创建数据源：

$ 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公开审阅者？是
自定义复数表单（用于构建REST URL）：是

Answer 4

这对我使用 LoopbackJs

起作用

Loopback框架是基于ExpressJ 的

您可以将此答案视为和https://github.com/blueimp/jQuery-File-Upload/的 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文件夹（此文件属于LoopbackJs框架BTW）中提供静态HTML资源：

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

下载并放置在/ client / test文件上传网页中： File Upload Webpage

运行您的node.app并指向 http://localhost:3000/files/ 您应该可以上传文件，并在“网络”标签中找到上传的文件名响应：

使用Loopback进行文件上传

4 个答案: