GO OSS 前端直传 Presign

go 服务端代码 

官方文档
阿里云直传
参考代码
留意事项：

• header不须要传
  
• &oss.PutObjectRequest 不要写成 &oss.GetObjectRequest
  

handler

1. package handler
3. import (
4.         "goshop-api/oss-web/utils"
5.         "net/http"
7.         "github.com/gin-gonic/gin"
8. )
10. func Presign(ctx *gin.Context) {
11.         fileName := ctx.Query("fileName")
12.         if fileName == "" {
13.                 ctx.JSON(http.StatusBadRequest, gin.H{
14.                         "error": "fileName is required",
15.                 })
16.                 return
17.         }
18.         result := utils.GetAliyunOSS().Presign(fileName)
20.         ctx.JSON(http.StatusOK, gin.H{
21.                 "url": result.URL,
22.         })
23. }

复制代码

utils

1. package utils
3. import (
4.         "context"
5.         "goshop-api/oss-web/global"
6.         "time"
8.         "github.com/aliyun/alibabacloud-oss-go-sdk-v2/oss"
9.         "github.com/aliyun/alibabacloud-oss-go-sdk-v2/oss/credentials"
10.         "go.uber.org/zap"
11. )
13. type AliyunOSS struct {
14.         Client     *oss.Client
15.         BucketName string
16.         Region     string
17. }
19. func GetAliyunOSS() *AliyunOSS {
20.         provider := credentials.NewStaticCredentialsProvider(global.ServerConfig.OssInfo.ApiKey, global.ServerConfig.OssInfo.ApiSecret)
21.         config := oss.LoadDefaultConfig().
22.                 WithCredentialsProvider(provider).
23.                 WithEndpoint(global.ServerConfig.OssInfo.EndPoint).
24.                 WithRegion(global.ServerConfig.OssInfo.Region).
25.                 WithSignatureVersion(oss.SignatureVersionV4)
27.         return &AliyunOSS{
28.                 Client:     oss.NewClient(config),
29.                 BucketName: global.ServerConfig.OssInfo.BucketName,
30.                 Region:     global.ServerConfig.OssInfo.Region,
31.         }
32. }
34. func (o *AliyunOSS) Presign(fileName string) *oss.PresignResult {
35.         result, err := o.Client.Presign(context.TODO(), &oss.PutObjectRequest{
36.                 Bucket: oss.Ptr(o.BucketName),
37.                 Key:    oss.Ptr(fileName),
38.         },
39.                 oss.PresignExpires(10*time.Minute),
40.         )
41.         if err != nil {
42.                 panic(err)
43.         }
44.         return result
45. }

复制代码

前端代码

1. <!DOCTYPE html>
2. <html lang="en">
4. <head>
5.     <meta charset="UTF-8">
6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.     <title>Test</title>
8. </head>
10. <body>
12.     <button id="btn">点击</button>
13. </body>
14. <script>
15.    
16.     document.getElementById("btn").addEventListener("click", () => {
17.         const input = document.createElement("input");
18.         input.type = "file";
19.         input.accept = "image/*";
20.         input.multiple = false;
21.         input.addEventListener("change", (evt) => {
22.             const file = evt.target.files[0];
23.             if (!file) return;
24.             console.log("file", file);
25.             const fileReader = new FileReader();
26.             fileReader.readAsArrayBuffer(file);
27.             fileReader.addEventListener("load", (e) => {
28.                 const result = e.target.result;
29.                 let blob = null;
30.                 if (typeof result === 'object') {
31.                     blob = new Blob([result]);
32.                 } else {
33.                     blob = result;
34.                 }
35.                 fetch("http://localhost:8082/oss/v1/oss/preSign?fileName=demo/example.png", { method: "GET", }).then((response) => {
36.                     if (!response.ok) return console.log("resposne1", response);
37.                     return response.json();
38.                 }).then(data => {
39.                     console.log("url", data);
40.                     // const headers = getUrlParams(data.url)
41.                     // console.log("headers", headers);
42.                     fetch(data.url, { method: "PUT", body: blob })
43.                         .then(res => {
44.                             console.log("成功！", res);
45.                         }).catch(err => {
46.                             console.log("失败", err);
47.                         })
48.                 });
49.             });
50.         });
51.         input.click();
52.     })
53. </script>
55. </html>

复制代码