File Upload
이 컴포넌트는 다양한 props를 통해 파일 업로드 및 관리 기능을 유연하게 사용자 정의할 수 있도록 설계되었습니다. 파일 유형 제한, 최대 업로드 수, 미리보기 크기, 테이블 열 설정, 버튼 스타일 등 다양한 옵션을 제공하여 개발자가 필요에 따라 컴포넌트를 구성할 수 있습니다.
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
v-model | any | null | 업로드된 파일 데이터를 저장하는 객체입니다. attachContainer 속성을 통해 파일 목록을 관리합니다. |
ref-target | string | null | 파일이 연결될 대상(예: 게시판, 사용자 프로필)을 나타내는 문자열입니다. |
ref-type-target | string | 'default' | 파일이 연결될 대상의 유형을 나타내는 문자열입니다. |
ref-target-key | any | null | 파일이 연결될 대상의 고유 키(ID)입니다. 파일을 특정 엔티티에 연결할 때 사용됩니다. |
multiple | boolean | false | 여러 파일을 동시에 업로드할 수 있는지 여부를 결정합니다. |
max-count | number | 0 | 최대 업로드 파일 수를 제한합니다. 0은 제한 없음을 의미합니다. |
image-only | boolean | false | 이미지 파일만 업로드할 수 있도록 제한합니다. |
accept | string | null | 허용되는 파일 형식을 지정합니다. (예: 'image/*', 'application/pdf') |
show-header | boolean | true | 테이블의 헤더를 표시할지 여부를 결정합니다. |
preview-max-size | number | 100 | 이미지 미리보기의 최대 크기(픽셀)를 지정합니다. |
cols | string[] | ['THUMB', 'NAME', 'DESCRIPTION', 'SIZE', 'ACTION'] | 테이블에 표시할 열을 정의합니다. |
enable-copy-direct-url | boolean | false | 프론트 URL 복사 버튼을 표시할지 결정합니다. |
disable-url-copy-message | string | '저장 후에 URL을 복사 할 수 있습니다.' | 프론트 URL 복사 기능이 활성화 되지 않았을때 표시할 메시지를 설정합니다. |
use-direct-url | boolean | false | 프론트 url을 사용할지 결정합니다. |
예제1. 이미지 파일 1개만 업로드
이미지 1개 업로드
html
<nv-file-upload
v-model="model"
ref-target="unvus"
:ref-target-key="model.id"
:max-count="1"
accept="image/*"
/>