Javscript) S3 url을 File로 변환하기

- 구동방식은 서버로부터 받은 s3 url을 클라이언트가 저장하고 있다가 File로 변환하고 싶을때
클라이언트는 s3 url을 서버로 전송하고 서버는 받은 s3 url을 s3-aws를 이용하여 buffer로 변환하여 클라이언트에게
다시 전달한다.

그이후 클라이언트는 buffer를 blob -> file로 변환한다.

- 클라이언트 코드

const s3imageUrlToFile = async () => {
        try{
            let config = {
                headers: {
                    Accept: '*/*',
                    'Content-Type': 'application/json;charset=utf-8',
                    'Cache-Control': 'no-cache',
                    'Access-Control-Allow-Origin': '*'
                }
            }

            let url = '/image/download';

            let res = await axios.post(url, {
                email:'master',
                key:'https://buket-test.s3.ap-southeast-1.amazonaws.com/folder/1653014434247.png'
                // @ts-ignore
            }, config)

            console.log(res.data.data)
            const fileStream = res.data.data.filestream
            const filename = res.data.data.filename

            const myBlob = new Blob([new Uint8Array([...fileStream.Body.data]).buffer], {
                type: fileStream.ContentType
            })

            const myFile = new File([myBlob],filename,{
                type: fileStream.ContentType
            });
            //파일 list에 저장
            setFile([myFile])//react함수입니다. 신경안쓰셔도 됩니다.

        } catch (e) {
            console.log(e)
        }
    }

 

- 서버 코드

const { email, key  } = request.params;

let filestream = null;

//key string 잘라주기
//https://buket-test.s3.ap-southeast-1.amazonaws.com/folder/1653014434247.png
// split - > folder/1653014434247.png

let fileKey = key.split('/')[3] + '/' + key.split('/')[4]

try{
    const params = {
        Bucket: process.env.A3_BUKETNAME,
        Key: fileKey, // Key는 s3 전체 url이 아니다 -> 위에 참고
    };
    filestream = await s3.getObject(params).promise();
    console.log('downloadFilesWithMulter - body : ', filestream);
} catch (e) {
    filestream = null;
    console.log('downloadFilesWithMulter - exception : ', e);
}

return {filestream, filename : key.split('/')[4]}

 

개발자에게 무한 동력 에너지 충전을 위해  하단 광고를 클릭해주세요. 삐삑