reactjs - 如何通过react/axios和golang/gin上传图片到S3

Question

我想按照以下步骤制作将图像发布到 S3 的功能。

1. 用户在屏幕上上传图片。
2. 图片文件提交后发送到服务器
3. 图片在服务器端(golang)上传到S3。

现在问题在 3。“图像在服务器端(golang)上传到 S3。”

服务器端代码没有错误。

调试在此方法中显示为 nil 值。

form, _ := c.MultipartForm()

这是代码。

//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 := ""

    //some codes for mysql connection

    router.Use(
    // some codes
    )

    api := router.Group("/api")
    {
        api.POST("/post", func(c *gin.Context) {
            //some codes for inserting article data in mysql

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

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

            //Here form value is nill.
            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")
}

我预计图像会上传到 S3，但实际上由于服务器错误而没有上传。

以下是错误信息。

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

• 前端:react/axios
• 后端:golang/gin
• 上传库:dropzone
• 存储:亚马逊s3

Answer 1

我通过分离请求解决了这个问题。 以下是我修复的代码。

//React
    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'},
      }
    );
  }

//Golang
        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)
        })