reactjs - 如何使用 Gin + React 上传文件？

问题描述

我想从 React 上传图像文件，这样做似乎我需要将图像存储在服务器上并从 POST 请求中检索它，以便将其修改为 url 路径。

使用 Gin Gonic http 框架。

这是我的 POST 请求在 React 中的表单：

    <form action="/upload" method="POST">
      <label htmlFor="upload" onChange={onChange}>
        <FontAwesomeIcon icon={faUserCircle} color="#3B5998" size="10x" className={`${pointer}`} />
        <input type="file" hidden id="upload" name="upload" />
      </label>
    </form>

这是我正在调用的方法，onChange以将请求与图像文件一起发送：

  uploadFile = (file) => {
    const formData = new FormData();
    formData.append('image', file);
    axios({
      method: 'post',
      url: `${gamingApiBaseURL}/v1/upload-image`,
      data: formData,
      headers: { 'Content-Type': 'multipart/form-data' },
    }).catch((error) => {
      console.log('error storing image', error);
    });
  };

这是我的 Go 结构，用于绑定请求

type ImageForm struct {
    Image *multipart.FileHeader `form:"upload binding:"required"`
}

最后，应该获取图像文件并将其上传到服务器的方法。这是我到目前为止所拥有的。我收到一条错误消息，说http: no such file这很奇怪，因为在 Postman 中我看到了image密钥和文件名，我试图理解在 Go 中上传图像的工作原理。

func extractImage(c *gin.Context) {
    // Using 'ShouldBind'
    formFile, err := c.FormFile("image")

    fmt.Println("Error", err)
    if err != nil {
        c.JSON(http.StatusBadRequest, err)
    }

    fmt.Println("form error", formFile)
}

标签： reactjsgogo-gin

我认为这个结构标签是错误的

type ImageForm struct {
    Image *multipart.FileHeader `form:"upload binding:"required"`
}

改成这个（后面缺少双引号upload）：

type ImageForm struct {
    Image *multipart.FileHeader `form:"upload" binding:"required"`
}

reactjs - 如何使用 Gin + React 上传文件？

问题描述

解决方案

推荐阅读