반응형
1개의 이미지 URL을 File 또는 FileList로 변환하기
export const convertImageUrlToFileList = async (
imageUrl: string
): Promise<FileList> => {
const response = await fetch(imageUrl);
if (!response.ok) {
throw new Error("이미지를 받을 수 없습니다.");
}
const data = await response.blob();
const ext = imageUrl.split(".").pop() || "";
const filename = imageUrl.split("/").pop() || "";
const metadata = { type: `image/${ext}` };
const file = new File([data], filename, metadata);
// 여기서 file을 return하면 File
const dataTransfer = new DataTransfer();
dataTransfer.items.add(file);
return dataTransfer.files;
};
2개 이상의 이미지 URL를 포함한 array를 FileList로 변환하기
export const convertImageUrlArrayToFileList = async (
imageUrls: string[]
): Promise<FileList> => {
const responses = await Promise.all(
imageUrls.map(async (imageUrl) => {
const response = await fetch(imageUrl);
if (!response.ok) {
throw new Error(`${imageUrl} 이미지를 받을 수 없습니다.`);
}
return response.blob();
})
);
const dataTransfer = new DataTransfer();
responses.forEach((data, index) => {
const ext = imageUrls[index].split(".").pop() || "";
const filename = imageUrls[index].split("/").pop() || "";
const metadata = { type: `image/${ext}` };
const file = new File([data], filename, metadata);
dataTransfer.items.add(file);
});
return dataTransfer.files;
};
반응형
'웹_프론트엔드 > JavaScript' 카테고리의 다른 글
[자바스크립트] 배열 안에 배열이 있을때 flat한 배열로 만들기 (0) | 2023.12.05 |
---|---|
[JS] 클로저란? (0) | 2023.07.25 |
[JS] 스코프(Scope)란? (0) | 2023.07.24 |
[JS] 연속된 정수 배열을 만드는 다양한 방법 (0) | 2023.07.14 |
자바스크립트 스크롤 애니메이션 넣기 - Intersection Observer API (0) | 2023.03.31 |