Loopback4文件上传存储组件示例

时间:2019-03-17 12:53:46

标签: file upload components storage loopback

我正在寻找一个使用loopback4的文件存储的示例,有人可以为文件添加操作提供控制器配置吗?

1 个答案:

答案 0 :(得分:2)

LoopBack 4没有为多部分文件上传请求提供内置解析器。相反,我们提供了扩展点,允许应用程序使用multer之类的第三方解析器。

有两种方法可以编写一个控制器来接受文件上传。您可以在我们的文档中了解有关此主题的更多信息,请参见Parsing requestsExtending request body parsing

1。使用控制器方法处理文件上传

指示LoopBack将原始流传递到您的控制器方法。在controller方法中,调用文件上传解析器以处理多部分流。

优点:不同的端点可能希望以不同的方式处理上载的文件。通过使用控制器方法实现文件上传解析,可以轻松自定义此过程的所有方面。

file-upload.acceptance.ts交叉发布示例:

import * as multer from 'multer';

class FileUploadController {
  @post('/show-body', {
    responses: {
      // (left out for brevity)
    },
  })
  async showBody(
    @requestBody({
      description: 'multipart/form-data value.',
      required: true,
      content: {
        'multipart/form-data': {
          // Skip body parsing
          'x-parser': 'stream',
          schema: {type: 'object'},
        },
      },
    })
    request: Request,
    @inject(RestBindings.Http.RESPONSE) response: Response,
  ): Promise<Object> {
    const storage = multer.memoryStorage();
    const upload = multer({storage});
    return new Promise<object>((resolve, reject) => {
      upload.any()(request, response, err => {
        if (err) reject(err);
        else {
          resolve({
            files: request.files,
            fields: (request as any).fields,
          });
        }
      });
    });
  }

2。实现并注册用于多部分文件上传的主体解析器

在此选项中,所有文件上载都在传输层以所有控制器方法相同的方式进行处理。控制器方法接收已解析的数据。

file-upload-with-parser.acceptance.ts中的正文解析器实现示例:

class MultipartFormDataBodyParser implements BodyParser {
  name = 'multipart/form-data';

  supports(mediaType: string) {
    // The mediaType can be
    // `multipart/form-data; boundary=--------------------------979177593423179356726653`
    return mediaType.startsWith('multipart/form-data');
  }

  async parse(request: Request): Promise<RequestBody> {
    const storage = multer.memoryStorage();
    const upload = multer({storage});
    return new Promise<RequestBody>((resolve, reject) => {
      upload.any()(request, {} as any, err => {
        if (err) reject(err);
        else {
          resolve({
            value: {
              files: request.files,
              fields: (request as any).fields,
            },
          });
        }
      });
    });
  }
}

利用此主体解析器的示例控制器:

class FileUploadController {
  @post('/show-body', {
    responses: {
      // (left out for brevity)
    },
  })
  async showBody(
    @requestBody({
      description: 'multipart/form-data value.',
      required: true,
      content: {
        'multipart/form-data': {
          schema: {type: 'object'},
        },
      },
    })
    {files, fields}: any,
  ) {
    return body;
  }
}