백엔드, 이미지를 업로드

Image Upload Process

---

라고 써뒀지만, 실제로 그런가?

그냥 이미지경로를 저장해두면 되지 않을까 생각했다가, 결국 그 디렉토리 안에 파일이 있어야 한다는 점을 금새 깨달았다. 음...

그렇다면

파일을 받아서 이미지 파일 디렉토리에 때려넣고,

그러면서 파일 이름도 유니크하게 중복없이 바꿔주고,

그 이름과 경로를 이미지 데이터베이스 테이블에 넣어줘야겠구나, 하고 생각이 드는데.

https://stackoverflow.com/questions/59957394/typeorm-uploading-and-serve-downloading-files

TypeORM uploading and serve (downloading) files

신비하도다...

https://www.youtube.com/watch?v=qPQPsRA9R7Y 

그리고 영상도 꽤 많다.. 게임개발할 때는 주로 유튜브를 찾아봤었는데 요즘엔 너무 편협하게 검색을 하나 반성하게 된다.

https://intrepidgeeks.com/tutorial/upload-images-to-graphql-apollo-and-typeorm

GraphQL, Apollo, TypeORM으로 이미지 업로드

정체를 알수없는 번역투의 블로그도 있다. 내장된 파일 업로드 기능을 이용해서 사용하는 모양이다.

yarn add graphql-upload

그리고 아폴로 서버와 이 기능이 충돌하므로, 이것을 쓰려면 아폴로 측 기능을 비활성화 한다.

const apolloServer = new ApolloServer({
    uploads: false, // disable apollo upload property
    schema: await createSchema(),
    context: ({ req, res }) => ({
      req,
      res,
      redis,
      userLoader: createUserLoader(),
    }),
  });

이러고 나면 업로드하는 것만 남았다.

그리고 올라올 파일들의 한계치를 지정해준다. 어마어마한 1테라짜리 이미지를 때려박을지도 모른다. 세상은 넓고 좁으면서도 아주 위험한 곳이다.

const app = express();
app.use(graphqlUploadExpress({ maxFileSize: 10000000, maxFiles: 10 }));
apolloServer.applyMiddleware({
        app
    });

일단은 프로미스문을 이용한 예제다.

import { FileUpload, GraphQLUpload } from "graphql-upload";

@Mutation(() => Boolean)
  async singleUpload(
        //1
    @Arg("file", () => GraphQLUpload)
    { createReadStream, filename }: FileUpload
  ) {
        //2
    await new Promise(async (resolve, reject) =>
      createReadStream()
        .pipe(
          storage.bucket(bucketName).file(filename).createWriteStream({
            resumable: false,
            gzip: true,
          })
        )
        //3
        .on("finish", () =>
          storage
            .bucket(bucketName)
            .file(filename)
            .makePublic()
            .then((e) => {
              console.log(e[0].object);
              console.log(
                `https://storage.googleapis.com/${bucketName}/${e[0].object}`
              );
            })
        )
        .on("error", () => reject(false))
    );
  }

storage에 버킷이라는 통을 만들고 그곳에 집어넣는 것.

그 뒤에는 브라우저가 로컬 컴퓨터의 경로에 접근가능하게 하고, 파일경로를 따와서 가져오면 된다. 이 뒤는 프론트의 영역.