Gin+阿里sdk实现垃圾分类
效果图：
坑:
这里图像识别的时候图片的链接必须是同一地区阿里OSS上存放的图像，所以这里还得接入阿里oss sdk，图片这边的话不能是中文名。
流程：
前端 => 上传目标图片 => server端调用Api进行识别 => 返回结果并渲染.
目录结构：
Code：
main.go
package main
import (
"fmt"
"github.com/aliyun/alibaba-cloud-sdk-go/services/imagerecog"
"github.com/aliyun/aliyun-oss-go-sdk/oss"
"github.com/gin-gonic/gin"
"net/http"
"os"
"strings"
)
var (
file string
filename string
AccessKeyId string="xxxxxxxxxxx"
AccessKeySecret string="xxxxxxxxxxx"
Endpoint string="xxxxxxxxxxx"
Bucket string="xxxxxxxxxxx"
)
func httpsever(){
server:=gin.Default()
server.LoadHTMLGlob("static/*")
server.POST("/result", func(c *gin.Context) {
//获取表单数据 参数为name值
f, err := c.FormFile("file")
//错误处理
if err != nil {
c.JSON(http.StatusBadRequest, gin.H{
"error": err,
})
return
} else {
//将文件保存至本项目根目录中
c.SaveUploadedFile(f, "./img/"+f.Filename)
file="./img/"+f.Filename
upload()
result:=detect()
c.HTML(200,"result.html",gin.H{
"src":file,
"result":result,
})
}
})
server.GET("/", func(c *gin.Context) {
c.HTML(200,"index.html","")
})
server.Run(":8080")
}
func detect() string{
client, err := imagerecog.NewClientWithAccessKey("xxxxxxxxxxx", AccessKeyId, AccessKeySecret)
fileurl:="https://"+Bucket+"."+Endpoint+"/"+filename
request := imagerecog.CreateClassifyingRubbishRequest()
request.Scheme = "https"
request.ImageURL = fileurl
response, err := client.ClassifyingRubbish(request)
if err != nil {
fmt.Print(err.Error())
}
info:=response.Data.Elements[0]
return info.Category
}
func upload(){
ossclient, err := oss.New(Endpoint, AccessKeyId, AccessKeySecret)
if err != nil {
fmt.Println("Error:", err)
os.Exit(-1)
}
tmp:=strings.Split(file,"/")
filename=tmp[len(tmp)-1]
// 获取存储空间。
bucket, err := ossclient.Bucket(Bucket)
if err != nil {
fmt.Println("Error:", err)
os.Exit(-1)
}
// 上传本地文件。
err = bucket.PutObjectFromFile(filename, file)
if err != nil {
fmt.Println("Error:", err)
os.Exit(-1)
}
}
func main() {
httpsever()
}
前端代码
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div class="navbar-wrapper">
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">图像识别系统</a>
</div>
</div>
</nav>
</div>
</div>
<div class="page-header">
<h1 class="col-sm-offset-1">资源上传</h1>
</div>
<div class="container">
<form action="/result" method="post" class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label for="" class="col-sm-3 control-label">选择文件:</label>
<input type="file" name="file" class="btn btn-primary btn-lg glyphicon glyphicon-plus">
<label for="" control-label="">请选择文件，大小50M以内. 文件名无中文</label>
</div>
<button class="btn btn-primary col-sm-2 col-sm-offset-6 glyphicon glyphicon-plane" type="submit">上传</button>
</form>
</div>
</body>
</html>
result.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Result</title>
</head>
<body style="color: beige">
<center>
<img src={{ .src }}/>
<h2 style="color:black;">垃圾类别:{{ .result }} </h2>
</center>
</body>
</html>
本文系作者 @孤独常伴 原创发布在 L0ne1y。未经许可，禁止转载。