带环回的文件上传 [英] File Upload With Loopback

问题描述

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

I created a Simple file uploading Application with loopback. Application client side i used simple html and Java Script code .

我使用ajax调用来调用回送api，这是Java脚本代码-

i calling a loopback api with ajax call , this is Java Script code -

$('#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!');
            }
        });
    }

});

但是我们没有在服务器端获取文件.在服务器端，我们创建了一个回送api.

But we are not getting files on server side . On Server side we Created a Loopback api .

对我们有什么帮助，如何使用环回api上传文件.

can any help us , how to upload files with loopback api .

这是我的回送api代码-

This is my loopback api code -

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';


    };

推荐答案

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

npm install --save multer

在MyModel.js

In 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

Frontend - I use AngularJS, so for that follow -https://github.com/nervgh/angular-file-upload

还有其他类似的指令要使用

there are also other such directives to use

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

P.S. - As per your comment - 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文件夹中，一旦上传，您就可以控制文件的处理方式，一旦一切完成，最终将其删除(可选)

Can't provide you exact solution, but using above method files will be uploaded in your /client/uploads folder, once uploaded then you have control on what to do with file and once everything is done, eventually delete it(optional)

这篇关于带环回的文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！