Axios post로 이미지 업로드후 response 활용

[hbkim]

셀렉트어드민의 http 블록을 통해 이미지를 업로드하고 응답을 즉시 사용하고 싶을때 방법입니다.

showResult: table 을 통해 api response를 테이블 형태로 바꿔보세요.

필요시 showResultTemplate 으로 커스텀 가능합니다.

관련하여 궁금하신 사항은 문의주시면 안내드리겠습니다.

감사합니다.

showResult: table 예제 이미지

showResultTemplate 커스텀 예제 이미지

예제 YAML 코드

blocks:
- type: http
  axios:
    method: POST
    url: https://api.selectfromuser.com/sample-api/upload
    headers: 
      Content-Type: multipart/form-data
  params:
    - key: title
      value: title
    - key: file
      format: file
      id: multipartFileRequest
  rowsPath: result
  showResult: table
  # showResult: template
  # showResultTemplate: |
  #   object_url: {{object_url}}
  #   name: {{name}}
  columns:
    object_url:
      format: image
      copy: true
    file:
      hidden: true
    name:
      format: template
      template: |
        <a href="{{object_url}}" target="_blank">{{name}}</a>
  responseFn: |
    rows.name = rows.file.originalname

[hbkim]

관련 질문:

POST API에 대한 결과를 showResult로 table로 테이블 형태로 조회했을 때 selectOptions으로 해당 테이블 선택할 수 있을까요?

답변:

아래와 같이 구현할 수 있습니다. showResult: table 결과에서 바로 선택하는 부분은 추후 반영시 안내드리겠습니다.

1. response에 결과물저장
2. response에서 1번 결과물 가져오기

  - type: http
    axios: ...
    responseFn: |
      rows.name = rows.file.originalname

      window.ResultRows1 = rows
    reloadAfterSubmit: true

  - type: query
    resource: json
    sqlType: select
    json: []
    responseFn: |
      rows = window.ResultRows1 ? [window.ResultRows1] : []
      return rows
    selectOptions:
      enabled: true