파일 저장(filestore)
`filestore`는 Elice 파일 서비스를 사용하여 파일을 업로드하거나 업로드한 파일 데이터를 가져오는데 사용할 수 있는 기능을 제공합니다.
⚠️ 주의사항
파일 URL은 영구적으로 유효한 주소가 아니므로 절대 업로드된 파일 URL을 kvstore 또는 로컬 저장소에 저장하여 재사용하지 마세요.
❌ 잘못된 예시
// 업로드한 파일 URL을 로컬 스토리지에 저장하여 재사용하는 예시
const App = () => {
const [profileUrl, setProfileUrl] = useState(null);
const handleUpload = async (e) => {
const file = e.target.files[0];
await eliceContents.filestore.post('profile', file);
const { url } = await eliceContents.filestore.get('profile');
localStorage.setItem('profileUrl', url);
setProfileUrl(url);
};
useEffect(() => {
// ⚠️ 로컬 저장소에 저장된 URL이 만료된 주소일 경우 이미지가 표시되지 않습니다.
// 따라서 업로드된 파일 URL을 로컬 저장소에 저장하여 재사용하지 마세요.
const storeProfileUrl = localStorage.getItem('profileUrl');
setProfileUrl(storeProfileUrl);
}, []);
return (
<div>
{profileUrl && <img src={profileUrl} alt="profile" />}
<input type="file" onChange={handleUpload} />
</div>
);
};
✅ 올바른 예시
// filestore를 통해 업로드된 파일 URL을 가져와 사용하는 예시
const App = () => {
const [profileUrl, setProfileUrl] = useState(null);
const handleUpload = async (e) => {
const file = e.target.files[0];
await eliceContents.filestore.post('profile', file);
const { url } = await eliceContents.filestore.get('profile');
setProfileUrl(url);
};
useEffect(() => {
const getProfileUrl = async () => {
// ✅ filestore를 통해 유효한 파일 URL을 가져와 사용합니다.
const profile = await eliceContents.filestore.get('profile');
if (profile) {
setProfileUrl(profile.url);
}
};
getProfileUrl();
}, []);
return (
<div>
{profileUrl && <img src={profileUrl} alt="profile" />}
<input type="file" onChange={handleUpload} />
</div>
);
};
메서드
post (파일 업로드)
⚠️ 파일 크기 제한은 50MB
입니다. 따라서 50MB를 초과하는 파일은 업로드할 수 없습니다.
Elice 파일 서비스에 파일을 업로드하려면 이 메서드를 사용할 수 있습니다.
파라미터
JavaScript 예제
import { eliceContents } from 'src/constants';
const uploadFile = async () => {
const file = new File(['Hello, world!'], 'example', { type: 'text/plain' });
await eliceContents.filestore.post('example', file);
};
React 예제
import { eliceContents } from 'src/constants';
const App = () => {
const handleUpload = async (e) => {
const file = e.target.files[0];
await eliceContents.filestore.post('example', file);
};
return (
<input type="file" onChange={handleUpload} />
);
};
get (업로드된 파일 가져오기)
Elice 파일 서비스에서 업로드된 파일을 가져오려면 이 메서드를 사용할 수 있습니다. 응답에는 name
, mime
, size
, url
과 같은 파일 메타데이터가 포함됩니다. url
을 사용하여 이미지, 비디오, 오디오 등의 파일에 접근할 수 있습니다.
파라미터
JavaScript 예제
import { eliceContents } from 'src/constants';
const downloadFile = async () => {
const file = await eliceContents.filestore.get('example');
console.log(file); // { name: 'example', mime: 'text/plain', size: 13, url: 'https://filestore.elice.io/...' }
const imageViewer = document.createElement('img');
imageViewer.src = file.url;
document.body.appendChild(imageViewer);
};
downloadFile();
React 예제
import { eliceContents } from 'src/constants';
const App = () => {
const [file, setFile] = useState(null);
useEffect(() => {
const getFile = async () => {
const value = await eliceContents.filestore.get('example');
setFile(value);
};
getFile();
}, []);
return (
<div>
{file && <img src={file.url} alt={file.name} />}
</div>
);
};
Delete (파일 삭제)
Elice 파일 서비스에서 업로드된 파일을 삭제하려면 이 메서드를 사용할 수 있습니다.
파라미터
JavaScript 예제
import { eliceContents } from 'src/constants';
eliceContents.filestore
.post('example', new File(['Hello, world!'], 'example', { type: 'text/plain' }))
.then(async () => {
await eliceContents.filestore.delete('example');
await eliceContents.filestore.get('example'); // null
});
React 예제
import { eliceContents } from 'src/constants';
const App = () => {
const [file, setFile] = useState(null);
const handleDelete = async () => {
await eliceContents.filestore.delete('example');
const value = await eliceContents.filestore.get('example');
setFile(value);
};
useEffect(() => {
const getFile = async () => {
const value = await eliceContents.filestore.get('example');
setFile(value);
};
getFile();
}, []);
return (
<div>
{file && <img src={file.url} alt={file.name} />}
<button onClick={handleDelete}>Delete</button>
</div>
);
};
Last updated