环回 4:通过 POST 方法上传 multipart/form-data
Loopback 4: Upload multipart/form-data via POST method
我在 Loopback 4 中工作,在创建 POST 方法时遇到困难,以便客户端可以调用此方法并上传 multipart/form-data。
我读了一些例子:
- https://medium.com/@jackrobertscott/upload-files-to-aws-s3-in-loopback-29a3f01119f4
- https://github.com/strongloop/loopback-example-storage
但是,看起来它们不适合 Loopback 4。
你能帮我在 Loopback4 中通过 POST 方法上传 multipart/form-data 吗?
Loopback 4 团队正在实现此功能:https://github.com/strongloop/loopback-next/pull/1880
希望我们很快就会有它。
最近通过 https://github.com/strongloop/loopback-next/pull/1936 将对 multipart/form-data
的支持添加到 LoopBack 4。
因为处理上传文件的方式有很多种,LoopBack 4 没有提供开箱即用的通用文件上传解决方案。相反,它允许应用程序实现自己的文件上传处理程序。
在下面的示例中,我将 multer
配置为使用内存存储。这可能不是您想要在生产中执行的操作,请参阅 multer 文档以了解如何配置不同的存储后端。
另请注意,您也可以在 TypeScript 中使用 multer
,只需安装并添加 @types/multer
到您的 devDependencies
.
1.在控制器方法中处理文件上传
您可以告诉 LoopBack 跳过正文解析并将完整请求传递给您的控制器方法。在controller方法中,调用multer
处理文件上传。可以在 file-upload.acceptance.ts 中找到完整的工作示例,我在这里交叉发布控制器实现。
class FileUploadController {
@post('/show-body', {
responses: {
200: {
content: {
'application/json': {
schema: {
type: 'object',
},
},
},
description: '',
},
},
})
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) return reject(err);
resolve({
files: request.files,
fields: (request as any).fields,
});
});
});
}
}
2。注册自定义 LB4 BodyParser
或者,您可以将文件上传请求的解析移至专门的正文解析器,从而简化您的控制器方法来接收解析的结果。当您有多个控制器方法接受文件上传时,这尤其有用。
可以在 file-upload-with-parser.acceptance.ts 中找到完整的工作示例,我在这里交叉发布相关片段。
解析器:
class MultipartFormDataBodyParser implements BodyParser {
name = FORM_DATA;
supports(mediaType: string) {
// The mediaType can be
// `multipart/form-data; boundary=--------------------------979177593423179356726653`
return mediaType.startsWith(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) return reject(err);
resolve({
value: {
files: request.files,
fields: (request as any).fields,
},
});
});
});
}
}
在您的应用程序的构造函数中注册解析器:
app.bodyParser(MultipartFormDataBodyParser);
最后是控制器:
class FileUploadController {
@post('/show-body', {
responses: {
200: {
content: {
'application/json': {
schema: {
type: 'object',
},
},
},
description: '',
},
},
})
async showBody(
@requestBody({
description: 'multipart/form-data value.',
required: true,
content: {
[FORM_DATA]: {
schema: {type: 'object'},
},
},
})
body: unknown,
) {
return body;
}
}
我在 Loopback 4 中工作,在创建 POST 方法时遇到困难,以便客户端可以调用此方法并上传 multipart/form-data。 我读了一些例子:
- https://medium.com/@jackrobertscott/upload-files-to-aws-s3-in-loopback-29a3f01119f4
- https://github.com/strongloop/loopback-example-storage
但是,看起来它们不适合 Loopback 4。
你能帮我在 Loopback4 中通过 POST 方法上传 multipart/form-data 吗?
Loopback 4 团队正在实现此功能:https://github.com/strongloop/loopback-next/pull/1880
希望我们很快就会有它。
最近通过 https://github.com/strongloop/loopback-next/pull/1936 将对 multipart/form-data
的支持添加到 LoopBack 4。
因为处理上传文件的方式有很多种,LoopBack 4 没有提供开箱即用的通用文件上传解决方案。相反,它允许应用程序实现自己的文件上传处理程序。
在下面的示例中,我将 multer
配置为使用内存存储。这可能不是您想要在生产中执行的操作,请参阅 multer 文档以了解如何配置不同的存储后端。
另请注意,您也可以在 TypeScript 中使用 multer
,只需安装并添加 @types/multer
到您的 devDependencies
.
1.在控制器方法中处理文件上传
您可以告诉 LoopBack 跳过正文解析并将完整请求传递给您的控制器方法。在controller方法中,调用multer
处理文件上传。可以在 file-upload.acceptance.ts 中找到完整的工作示例,我在这里交叉发布控制器实现。
class FileUploadController {
@post('/show-body', {
responses: {
200: {
content: {
'application/json': {
schema: {
type: 'object',
},
},
},
description: '',
},
},
})
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) return reject(err);
resolve({
files: request.files,
fields: (request as any).fields,
});
});
});
}
}
2。注册自定义 LB4 BodyParser
或者,您可以将文件上传请求的解析移至专门的正文解析器,从而简化您的控制器方法来接收解析的结果。当您有多个控制器方法接受文件上传时,这尤其有用。
可以在 file-upload-with-parser.acceptance.ts 中找到完整的工作示例,我在这里交叉发布相关片段。
解析器:
class MultipartFormDataBodyParser implements BodyParser {
name = FORM_DATA;
supports(mediaType: string) {
// The mediaType can be
// `multipart/form-data; boundary=--------------------------979177593423179356726653`
return mediaType.startsWith(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) return reject(err);
resolve({
value: {
files: request.files,
fields: (request as any).fields,
},
});
});
});
}
}
在您的应用程序的构造函数中注册解析器:
app.bodyParser(MultipartFormDataBodyParser);
最后是控制器:
class FileUploadController {
@post('/show-body', {
responses: {
200: {
content: {
'application/json': {
schema: {
type: 'object',
},
},
},
description: '',
},
},
})
async showBody(
@requestBody({
description: 'multipart/form-data value.',
required: true,
content: {
[FORM_DATA]: {
schema: {type: 'object'},
},
},
})
body: unknown,
) {
return body;
}
}