Skip to content
On this page

파일 포맷 업로드

클라이언트 전달 방식

updateOptions에 해당하는 예제를 담고 있습니다.
HTTP API (multipart/form-data)를 통해 업로드 한 결과값을 입력 폼으로 가져옵니다.

미리보기

  1. 편집할 해당 컬럼을 클릭합니다.

  1. 편집 모드로 바뀌면 직접 URL을 입력하거나 아래의 파일 선택 버튼이 표시됩니다.

  1. 원하는 파일을 선택하면 즉시 API 호출되어 업로드 완료 후 URL 값이 채워집니다.

  1. 저장(초록색 체크박스) 버튼을 누르면 반영된 모습을 볼 수 있습니다.

설정하기

  • httpOptions가 있는 경우 활성화 됩니다.
  • 기본값 filename: file
  • 기본값 result path: url
yaml
columns:
  hero_image_url:
    # format: image
    format: file
    httpOptions:
      url: https://example.com/sample-api/upload
      method: post
      headers:
        Content-Type: multipart/form-data
      
      # request FormData filename 변경을 원하는 경우
      name: file

      # response json에서 url을 지정하여 가져오는 경우
      usePath: "result.object_url"
    updateOptions:
      type: query
      resource: mysql.qa
      sql: UPDATE properties_copy SET hero_image_url = :value WHERE id = :id

해당 테스트 API의 응답 결과는 아래와 같습니다.

yaml
{
  "result": {
    "object_url": "https://placekitten.com/350/350?ts=1663131428104"
  }
}

서버 방식 업로드

yaml
menus:
- path: file-upload
  name: file-upload
pages:
- path: file-upload
  blocks:
  - type: http
    axios:
      method: POST
      url: https://.../.../upload
    params:
    - key: name
    - key: file
      format: file
      id: new-images