Цикл 4: выгрузка multipart/form-data методом POST

Я работаю в Loopback 4 и зацикливаюсь на создании метода POST, чтобы клиент мог вызвать этот метод и загрузить данные multipart / form. Я прочитал несколько примеров:

Но, похоже, они не подходят для Loopback 4.

Не могли бы вы помочь мне найти хороший пример или обходной путь для загрузки multipart / form-data с помощью метода POST в Loopback4.

Большое вам спасибо!

Источник

2 ответа

Поддержка для multipart/form-data был недавно добавлен в LoopBack 4 через https://github.com/strongloop/loopback-next/pull/1936.

Поскольку существует много разных способов обработки выгруженных файлов, LoopBack 4 не предоставляет стандартного решения для выгрузки файлов из коробки. Вместо этого он позволяет приложениям реализовывать собственный обработчик выгрузки файлов.

В приведенных ниже примерах я настраиваю multer использовать память. Это, вероятно, не то, что вы хотите делать в производственной среде, пожалуйста, обратитесь к документации документации, чтобы узнать, как настроить другой бэкэнд хранилища.

Также обратите внимание, что вы можете использовать multer в TypeScript тоже просто установите и добавьте @types/multer на ваш devDependencies,

1. Обработайте загрузку файла внутри вашего контроллера

Вы можете указать LoopBack пропустить синтаксический анализ тела и передать полный запрос методу контроллера. В методе контроллера вызов multer обрабатывать загрузку файлов. Полный рабочий пример можно найти в файле-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 реализует эту функцию: https://github.com/strongloop/loopback-next/pull/1880

Надеюсь, у нас это будет в ближайшее время.

Источник

Вы можете использовать этот модуль npm в качестве промежуточного программного обеспечения для обработки многочастных данных формы.

Источник
Другие вопросы по тегам