解决Gin传输文件到前端axois乱码问题

237 阅读1分钟

背景

我现在做一个类似于文件下载功能模块,需要从服务端下载到对应的前端

线上成功调试的code

后端代码


fileObj, err := os.Open(file.Url)
if err != nil {
    c.AbortWithStatus(http.StatusInternalServerError)
    return
}
defer fileObj.Close()
// 构建http.ResponseHeader
fi, err := fileObj.Stat()
if err != nil {
    c.AbortWithStatus(http.StatusInternalServerError)
    return
}
modtime := fi.ModTime()
size := fi.Size()

size := fi.Size()
contentType := "application/octet-stream"
// 实现http.ServeContent方法
encodedFilename := url.PathEscape(file.Name) // 对文件名进行百分比编码

c.Writer.Header().Set("Content-Disposition", "attachment; filename=""+file.Name+""; filename*=utf-8''"+encodedFilename)

c.Writer.Header().Set("Content-Type", contentType)
//c.Writer.Header().Set("content-transfer-encoding", "binary")
c.Writer.Header().Set("Content-Length", strconv.FormatInt(size, 10))
c.Writer.Header().Set("Last-Modified", modtime.UTC().Format(http.TimeFormat))

// 发送文件给请求方
//http.ServeContent(c.Writer, c.Request, file.Name, modtime, fileObj)
c.File(file.Url)

前端代码

最后采用blob的方式

const res = await downloadFile({fileId:id}).then((value)=>{
    console.log(fileName);
    //找后缀
    var fileExtension = fileName.split('.').pop().toLowerCase();
    // fileDownload(value.data,"xx."+fileExtension)
    const blob = new Blob([value.data], {
      type: mime[fileExtension]+""
      });
    const objectUrl = URL.createObjectURL(blob);
    const tmpLink = document.createElement("a");
        tmpLink.href = objectUrl;
        tmpLink.download = fileName
        tmpLink.click();
        URL.revokeObjectURL(objectUrl);
    })
 // axois 封装处
 export const downloadFile = (data) => {
  return service({
    url: '/xxxx/xxx',
    method: 'post', 
    responseType: 'blob',
    data
  })
}

处理流程

  • 有两个前后端 一个是直接静态资源返回.

  • 后段直接返回二进制 前端接受二进制 然后通过blob来生成文件.

  • swagger 可以正常返回文件正常格式,并且没问题.所以快速断定是前端的问题.

另外的坑 MMIE的所有对应格式.

谢谢这个大哥的贡献Json github.com/micnic/mime…