フロント（React）で受け取った画像ファイルをapi（Golang）に渡して最終的にS3に保存するまで

概要

フロント:React、サーバーサイド：golangで記事投稿サイトを作っていました。
画像投稿機能の実装をまとめます。
web frameworkにはそれぞれ、axiosとginを用いています。

実装

フロント(React)

post.tsx

interface ArticleState {
  files: File[];
}

class Post extends React.Component<{}, ArticleState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      files: [],
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleOnDrop = this.handleOnDrop.bind(this);
  }


  handleOnDrop(acceptedFiles: File[]) {
    this.setState({files: this.state.files.concat(acceptedFiles)});
  }

  async handleSubmit() {
    const formData = new FormData();
    for (var i in this.state.files) {
      formData.append('images[]', this.state.files[i]);
    }

    const postArticleImage = postArticleImageFactory();
    const resImageNames = await postArticleImage(formData);
  }

  render() {
    return (
          <Dropzone accept="image/*" onDrop={this.handleOnDrop}>
          //省略
          <Form.Button content="Submit" onClick={this.handleSubmit} />
    );
  }
}

• 画像投稿フォーム（ここではDropzone）から画像を投稿します。
• 投稿ボタンがクリックされると、formDataに画像を詰めてapiにrequestを飛ばすメソッドを呼びます。

articleAPI.tsx

export const postArticleImageFactory = () => {
  const postArticleImage = async (formData: FormData) => {
    try {
      const response = await axios.post('/api/post/image', formData, {
        headers: {'Content-Type': 'multipart/form-data'},
      });

      if (response.status !== 200) {
        throw new Error('Server Error');
      }

      return response.data;
    } catch (err) {
      throw err;
    }
  };
  return postArticleImage;
};

• headers: {'Content-Type': 'multipart/form-data'}を設定しないとapi通信でエラーが発生するので、設定しています。

バックエンド(Golang)

handler.go

	router := gin.Default()

	router.Use(cors.New(cors.Config{
		AllowOrigins:     []string{"*"},
		AllowMethods:     []string{"GET", "POST", "OPTIONS"},
		AllowHeaders:     []string{"Content-Type", "Content-Length", "Accept-Encoding", "X-CSRF-Token", "Authorization", "accept", "origin", "Cache-Control", "X-Requested-With"},
		ExposeHeaders:    []string{"Content-Length"},
		AllowCredentials: true,
		AllowOriginFunc: func(origin string) bool {
			return true
		},
		MaxAge: 15 * time.Second,
	}))

	api := router.Group("/api")
	{
		api.POST("/post/image", func(c *gin.Context) {
			cntlr.PostImageController(c)
		})
	}

• ginを利用してrequestを受け取っています。

service.go

func (s Service) PostImageService(c *gin.Context) []util.ImageName {

	form, _ := c.MultipartForm()
	files := form.File["images[]"]

	var imageNames []util.ImageName
	imageName := util.ImageName{}

	for _, file := range files {

		u, err := uuid.NewRandom()
		if err != nil {
			fmt.Println(err)
		}
		uu := u.String()

		s.dao.PostImageToS3Dao(file, uu)

		imageName.NAME = uu

		imageNames = append(imageNames, imageName)
	}

	return imageNames
}

• gin.Contextから画像ファイルを取り出しています。
• S3に保存する画像名を一意にする為、uuidを設定しています。（万が一画像名が同じだとバケットで上書きされる為）

s3.go

func (objs *S3) PostImageToS3(file *multipart.FileHeader, imageName string) error {
	creds := credentials.NewStaticCredentials(objs.APPID, objs.SECRET, "")

	cfg := aws.NewConfig().WithRegion("ap-northeast-1").WithCredentials(creds)
	svc := s3.New(session.New(), cfg)

	f, err := file.Open()

	if err != nil {
		log.Println(err)
	}

	defer f.Close()

	size := file.Size
	buffer := make([]byte, size)

	f.Read(buffer)
	fileBytes := bytes.NewReader(buffer)
	fileType := http.DetectContentType(buffer)
	path := "/media/" + imageName
	params := &s3.PutObjectInput{
		Bucket:        aws.String("<Bucket Name>"),
		Key:           aws.String(path),
		Body:          fileBytes,
		ContentLength: aws.Int64(size),
		ContentType:   aws.String(fileType),
	}
	resp, err := svc.PutObject(params)

	fmt.Printf("response %s", awsutil.StringValue(resp))

	return err
}

• S3に保存するメソッドです。
• テストしやすいようにS3に保存する目的だけのメソッドです（ゆえに返り値はerror）

---

ソースコード全貌は以下のgithubを参照してください
https://github.com/jpskgc/article