上传文件的步骤：Gin 与 React 教程

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个Golang开发实战，手把手教大家学习《上传文件的步骤：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)
}

解决方案

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

type imageform struct {
    image *multipart.fileheader `form:"upload binding:"required"`
}

更改为此（upload 后缺少双引号）：

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

以上就是《上传文件的步骤：Gin 与 React 教程》的详细内容，更多关于的资料请关注golang学习网公众号！