react/axiosとgolang/ginを使ってS3に画像をアップロードしたいです

Question

前提・実現したいこと

ローカル環境で動く画像投稿機能を作成しています。

具体的には、以下のプロセスで画像をS3にアップロードしたいです。

1. ユーザーが画面上から画像をアップロード(複数画像可能)
2. 投稿ボタンを押すと、画像ファイルがサーバーに渡される
3. サーバーで画像がS3に渡される処理が実行される

現在問題として、「3. サーバーで画像がS3に渡される処理が実行される」時点でnilエラーが発生しています。

フロントエンドにはReact、バックエンドサーバーにはGolangを利用しています。
フロントからサーバーへの通信にはaxios/ginをそれぞれ用いています。
また、画像アップロードのライブラリとしてdropzoneを使っています。

発生している問題・エラーメッセージ

POST http://localhost:4000/api/post 500 (Internal Server Error)
createError.js:17 Uncaught (in promise) Error: Request failed with status code 500
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:60)

[GIN] 2019/07/18 - 08:47:34 | 204 |      33.322µs |             ::1 | OPTIONS  /api/post

2019/07/18 08:47:34 [Recovery] 2019/07/18 - 08:47:34 panic recovered:
POST /api/post HTTP/1.1
Host: localhost:4000
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 68
Content-Type: application/json;charset=UTF-8
Origin: http://localhost:3000
Referer: http://localhost:3000/post/finish
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36


runtime error: invalid memory address or nil pointer dereference
/usr/local/go/src/runtime/panic.go:82 (0x10426f0)
        panicmem: panic(memoryError)
/usr/local/go/src/runtime/signal_unix.go:390 (0x104251f)
        sigpanic: panicmem()
/Users/jpskgc/go/src/github.com/gin-gonic/gin/context.go:532 (0x17122f5)
        (*Context).MultipartForm: return c.Request.MultipartForm, err
/Users/jpskgc/go/src/github.com/gin-gonic/gin/context.go:147 (0x14fdea9)
        (*Context).Next: c.handlers[c.index](c)
/Users/jpskgc/go/src/github.com/gin-gonic/gin/recovery.go:83 (0x1511939)
        RecoveryWithWriter.func1: c.Next()
/Users/jpskgc/go/src/github.com/gin-gonic/gin/context.go:147 (0x14fdea9)
        (*Context).Next: c.handlers[c.index](c)
/Users/jpskgc/go/src/github.com/gin-gonic/gin/logger.go:240 (0x15109e0)
        LoggerWithConfig.func1: c.Next()
/Users/jpskgc/go/src/github.com/gin-gonic/gin/context.go:147 (0x14fdea9)
        (*Context).Next: c.handlers[c.index](c)
/Users/jpskgc/go/src/github.com/gin-gonic/gin/gin.go:391 (0x1507da9)
        (*Engine).handleHTTPRequest: c.Next()
/Users/jpskgc/go/src/github.com/gin-gonic/gin/gin.go:352 (0x150749d)
        (*Engine).ServeHTTP: engine.handleHTTPRequest(c)
/usr/local/go/src/net/http/server.go:2774 (0x12e2207)
        serverHandler.ServeHTTP: handler.ServeHTTP(rw, req)
/usr/local/go/src/net/http/server.go:1878 (0x12dddf0)
        (*conn).serve: serverHandler{c.server}.ServeHTTP(w, w.req)
/usr/local/go/src/runtime/asm_amd64.s:1337 (0x1059ed0)
        goexit: BYTE    $0x90   // NOP

[GIN] 2019/07/18 - 08:47:34 | 500 |  119.560492ms |             ::1 | POST     /api/post

該当のソースコード

//import

interface ArticleState {
  title: string;
  content: string;
  redirect: boolean;
  files: File[];
}

class Post extends React.Component<{}, ArticleState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      title: '',
      content: '',
      redirect: false,
      files: [],
    };
    this.handleChangeTitle = this.handleChangeTitle.bind(this);
    this.handleChangeContent = this.handleChangeContent.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.renderRedirect = this.renderRedirect.bind(this);
    this.handleOnDrop = this.handleOnDrop.bind(this);
  }

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

  handleChangeTitle(e: React.FormEvent<HTMLInputElement>) {
    this.setState({title: e.currentTarget.value});
  }

  handleChangeContent(e: React.FormEvent<HTMLInputElement>) {
    this.setState({content: e.currentTarget.value});
  }

  handleSubmit() {
    this.setState({
      redirect: true,
    });
    const data = {
      title: this.state.title,
      content: this.state.content,
      files: this.state.files,
    };
    axios.post('http://localhost:4000/api/post', data).then(res => {
      console.log(res);
    });
  }

  renderRedirect = () => {
    if (this.state.redirect) {
      return <Redirect to="/post/finish" />;
    }
  };

  render() {
    return (
      <Container text style={{marginTop: '3em'}}>
        <Form>
          <Form.Input
            label="Title"
            placeholder=""
            name="title"
            value={this.state.title}
            onChange={this.handleChangeTitle}
          />
          <Form.Field
            label="Content"
            placeholder=""
            name="content"
            value={this.state.content}
            rows="20"
            control="textarea"
            onChange={this.handleChangeContent}
          />
          {this.renderRedirect()}
          <input type="file" id="file" hidden /> */}
          <Dropzone accept="image/*" onDrop={this.handleOnDrop}>
            {({getRootProps, getInputProps, open}) => (
              <section>
                <div {...getRootProps()} style={{margin: '20px auto'}}>
                  <input {...getInputProps()} />
                  <p>Drag 'n' drop some files here, or click to select files</p>
                  <button type="button" onClick={open}>
                    Open File Dialog
                  </button>
                </div>
              </section>
            )}
          </Dropzone>
          <Form.Button content="Submit" onClick={this.handleSubmit} />
        </Form>
      </Container>
    );
  }
}

export default Post;

package main

//import

type Article struct {
	ID      int    `json:"id"`
	TITLE   string `json:"title"`
	CONTENT string `json:"content"`
}

var articles []Article

type Param struct {
	Bucket      string
	Key         string
	Expires     string
	ContentType string
}

func main() {

	awsAccessKeyID := "Insert Key Here"
	awsSecretAccessKey := "Insert Secret Here"
	token := ""

	//mysql
	db, err := sql.Open("mysql", "user:password@tcp(localhost:3306)/article")
	if err != nil {
		panic(err.Error())
	}
	defer db.Close()

	err = db.Ping()
	if err != nil {
		panic(err.Error())
	}

	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", func(c *gin.Context) {
			//mysql
			var article Article
			c.BindJSON(&article)
			ins, err := db.Prepare("INSERT INTO articles(title,content) VALUES(?,?)")
			if err != nil {
				log.Fatal(err)
			}
			ins.Exec(article.TITLE, article.CONTENT)

			//aws
			creds := credentials.NewStaticCredentials(awsAccessKeyID, awsSecretAccessKey, token)

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

			//ここでformがnilになって落ちてしまいます
			form, _ := c.MultipartForm()
			files := form.File["upload[]"]

			for _, file := range files {
				f, err := file.Open()

				defer f.Close()
				fileInfo, _ := f.(*os.File).Stat()
				size := fileInfo.Size()
				buffer := make([]byte, size)

				f.Read(buffer)
				fileBytes := bytes.NewReader(buffer)
				fileType := http.DetectContentType(buffer)
				path := "/media/" + f.(*os.File).Name()
				params := &s3.PutObjectInput{
					Bucket:        aws.String("bucketname"),
					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))
			}

			c.JSON(http.StatusOK, gin.H{"status": "ok"})

		})
	}

	router.Run(":4000")
}

試したこと

デバッグしたところ、サーバーサイドのメソッドでnilが原因で落ちていることがわかりました

form, _ := c.MultipartForm()

以上、お手数ですがよろしくお願いいたします。

Answer 1

サーバーログのここを見ると
Content-Type: application/json;charset=UTF-8
ここがmultipart/form-dataにならないとc.MultipartForm()は失敗するような気がします。

axiosでContent-Typeを指定する必要があるかも。

（蛇足かもしれませんが、c.MultipartForm()が返すerror値はハンドリングしたほうが良いでしょう。）

Answer 2

Content-Type: application/json
と
Content-Type: multipart/form-data
を一緒に送信しようとして詰まったので、
テキストと画像イメージを別々に送信することで一旦解決しました。
以下対応部分のコードを記載しておきます。

    const data = {
      title: this.state.title,
      content: this.state.content,
    };

    const res = await axios.post('http://localhost:2345/api/post', data);

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

    const resImageNames = await axios.post(
      'http://localhost:2345/api/post/image',
      formData,
      {
        headers: {'Content-Type': 'multipart/form-data'},
      }
    );
  }

		api.POST("/post", func(c *gin.Context) {
			u, err := uuid.NewRandom()
			if err != nil {
				fmt.Println(err)
				return
			}
			uu := u.String()
			var article Article
			c.BindJSON(&article)
			ins, err := db.Prepare("INSERT INTO articles(uuid, title,content) VALUES(?,?,?)")
			if err != nil {
				log.Fatal(err)
			}
			ins.Exec(uu, article.TITLE, article.CONTENT)

			c.JSON(http.StatusOK, gin.H{"uuid": uu})

		})
		api.POST("/post/image", func(c *gin.Context) {
			creds := credentials.NewStaticCredentials(awsAccessKeyID, awsSecretAccessKey, token)

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

			form, _ := c.MultipartForm()

			files := form.File["images[]"]

			var imageNames []ImageName
			imageName := ImageName{}

			for _, file := range files {

				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/" + file.Filename
				params := &s3.PutObjectInput{
					Bucket:        aws.String("article-s3-jpskgc"),
					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))

				imageName.NAME = file.Filename

				imageNames = append(imageNames, imageName)
			}

			c.JSON(http.StatusOK, imageNames)
		})