使用 enctype="multipart/form-data" 上传表单时的空白数据

Question

我有一个有趣的问题。我正在尝试通过

上传表格

<form enctype="multipart/form-data" action="/myendpoint/:id">
    <input type="hidden" name="data" value="mydata" />
    <input type="file" name="formname" />
</form>

...和我的远程方法调用：

Patient.uploadVideo = function(id, mydata, cb) {
    console.log(mydata);
    return cb(null, { id: 123 });
};


MyModel.remoteMethod(
'uploadVideo',
{
  http: {path: '/:id/recording/:recordingid/videos', verb: 'post'},
  accepts: [
            {arg: 'id', type: 'string', required: true},
            {arg: 'mydata', type: 'object', 'http': {source: 'body'}},
           ]
  }
);

很遗憾，body 显示为空白

如何获取表单数据？我修改了 server/datasources.json 以包含

"storage": {
    "name": "storage",
    "connector": "loopback-component-storage",
    "provider": "filesystem",
    "root": "./server/storage"
}

仍然没有。

谢谢

Answer 1

所以不幸的是，在讨论如何上传文件时，文档非常有限。有一个对模块 "loopback-component-storage" 的引用，必须撕开它才能找到这颗未经加工的钻石。

var storage     =   require('loopback-component-storage');

MyModel.myFunction = function(req, res, options, cb) {
    var storage     =   require('loopback-component-storage');
    var storageService  = storage.StorageService({provider: 'filesystem', root: '/tmp'});

    storageService.upload(req, res, { container: 'upload' }, function(err, data) {
        console.log(data); // this provides a nice object with all of the variables and data wrt the file that was uploaded
        /// ..etc
    });
 };
 MyModel.remoteMethod(
    'myFunction',
    {
        http: {path: '/mypath', verb: 'post'},
        accepts: [
          {arg: 'req', type: 'object', 'http': {source: 'req'}},
          {arg: 'res', type: 'object', 'http': {source: 'res'}}
        ],
        returns: {arg: 'something', type: 'object'}
    }
);

您可以找到 StorageService 的文档 here

Answer 2

感谢指导。我使用 loopback 和 angular 2 进行文件上传，考虑到这两者的文档有多小，这是一个巨大的壮举。一些扩展：

在MyModel.myFunction = function(req, res, options, cb) {中，options不是绝对必要的。您可以将任何需要的选项作为 formData 对象的 "property" 传递，这些选项可能会传递到 req 对象中。在您的示例中，如果 options 未传递到函数中，而仅传递给 formData，则 cb 将不会被分配，并且会使整个调用失败。

如果有人想知道我是怎么做到的，主要调用是：

Angular 2

上传-test.component.ts

let file = event.srcElement.files[0];
let formData:FormData = new FormData();

this.forumPostService.uploadFile(formData).subscribe(
    response => {
        console.log(response);
    }
);

上传-test.service.ts

uploadFile(formData: FormData) {
    //LEAVE HEADERS BLANK. LOOPBACK CALL BORKS IF ASSIGNED!
    let headers = new Headers();
    return this.http
        .post('http://apiUrl/myModel/uploadTest',
            formData,
            {headers: headers})
        .map((response: Response) => {
            return response.json();
        });
}

保存文件的

"formData"在http请求中传入"req"回环API

环回

uploadTest.js

myModel.uploadTest = function(req, res, callback) {
    var storage = require('loopback-component-storage');
    //"root:'/'" will point to home drive, e.g. 'C://'
    var storageService = storage.StorageService({provider:'filesystem', root:'/'});
    /*"upload" will give e.g. 'C://upload', make sure this folder exists, 
    it wont create it for you*/
    storageService.upload(req, res, { container: 'upload'}, function(err, data) {
        if (err) {
            callback(err);
        }
        else {
            console.log(data.files.file[0]);
            callback(null, data.files.file[0]);
        }
    });
}

PostSections.remoteMethod(
    'uploadTest',{
        accepts: [
            {arg: 'req', type: 'object', 'http': {source: 'req'}},
            {arg: 'res', type: 'object', 'http': {source: 'res'}}
        ],
        returns: [
            { arg: 'Result', type: 'object' }
        ],
        http: { path: '/uploadTest', verb: 'post'}
    }
);

使用 enctype="multipart/form-data" 上传表单时的空白数据

Blank Data when Uploading Form Using enctype="multipart/form-data"

strongloop

loopbackjs

Angular 2

环回