使用uniapp 5+app实现二维码扫描并上传到服务器

最新推荐文章于 2024-05-23 14:22:22 发布

Neodeveloper

最新推荐文章于 2024-05-23 14:22:22 发布

阅读量591

点赞数 7

分类专栏：原创文章文章标签： uni-app golang typescript

本文链接：https://blog.csdn.net/NeoDeveloper/article/details/136049273

版权

原创文章专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用uniapp 5+app的demo代码，通过修改部分代码来实现扫描二维码后，将二维码内容上传至服务器（GO语言的接口）。

下面就开始吧。

1、新增 5+App 项目

修改barcode.html，增加POST数据的功能

<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="HandheldFriendly" content="true"/>
        <meta name="MobileOptimized" content="320"/>
        <title>Hello H5+</title>
  
                // 这行是新增的，要先把jquery-3.6.0.min.js下载下来 
        <script src="../js/jquery-3.6.0.min.js"></script>  

// 注意：
// 下载地址是：<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
// 不下载下来每次访问都要联网，有时还会失败，所以一定要下载下来

function update(t, r, f){
    outSet('扫描成功：');
    outLine(t);
    outLine(r);
    outLine('\n图片地址：'+f);
    
    // 这是新增的代码：发起 AJAX 请求(2024-02-05添加 )
      $.ajax({
        url: 'http://192.168.1.141:8080/post_qrcode',
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
                "qrcode": r
              }),
        success: function(response) {
          console.log('请求成功:', response);
        },
        error: function(xhr, status, error) {
          console.error('请求失败:', error);
        }
      });
    
  //以下是原来的代码
    if(!f || f=='null'){
        img.src = '../img/barcode.png';    
    } else{
        plus.io.resolveLocalFileSystemURL(f, function(entry){
            img.src=entry.toLocalURL();
        });
        //img.src = 'http://localhost:13131/'+f;
    }
}

js文件下载位置：

运行效果：

2、GO语言代码

服务器地址和端口：192.168.1.141:8080

type QRCode struct {
    QRcode string `json:"qrcode"`
}

func (c *ExampleController) BeforeActivation(b mvc.BeforeActivation) {
    anyMiddlewareHere := func(ctx iris.Context) {
        ctx.Application().Logger().Warnf("Inside /custom_path")
        ctx.Next()
    }

    // 以下这句是将API地址 /post_qrcode 解释到方法实现 PostQRCode
    b.Handle("POST", "/post_qrcode", "PostQRCode", anyMiddlewareHere)
}

func (c *ExampleController) PostQRCode(ctx iris.Context) {
    qrcode := new(QRCode)
    err := ctx.ReadJSON(&qrcode)

    if err != nil {
        ctx.StatusCode(iris.StatusBadRequest)
        ctx.WriteString(err.Error())
        fmt.Println("错误:", err.Error())
        return
    }

    // 打印出QRcode
    fmt.Println("QRCode:", qrcode.QRcode)
}

完整GO代码：

package main

import (
    "fmt"

    "github.com/kataras/iris/v12"

    "github.com/kataras/iris/v12/middleware/logger"
    "github.com/kataras/iris/v12/middleware/recover"
    "github.com/kataras/iris/v12/mvc"
)

type QRCode struct {
    QRcode string `json:"qrcode"`
}

func newApp() *iris.Application {
    app := iris.New()
    // （可选）添加两个内置处理程序
    // 可以从任何http相关的恐慌中恢复
    //并将请求记录到终端
    app.Use(recover.New())
    app.Use(logger.New())

    //根据根路由器提供控制器r, "/".
    mvc.New(app).Handle(new(ExampleController))

    return app
}

func main() {
    app := newApp()
    app.Run(iris.Addr(":8080"))
}

// ExampleController服务于 "/", "/ping" 和 "/hello".
type ExampleController struct{}

// 在控制器适应主应用之前，BeforeActivation调用一次
// 当然，在服务器运行之前.
// 在版本9之后，您还可以为特定控制器的方法添加自定义路由
// 在这里，您可以注册自定义方法的处理程序
// 使用带有`ca.Router`的标准路由器做一些你可以在没有mvc的情况下做的事情,
// 并添加将绑定到控制器的字段或方法函数的输入参数的依赖项.
func (c *ExampleController) BeforeActivation(b mvc.BeforeActivation) {
    anyMiddlewareHere := func(ctx iris.Context) {
        ctx.Application().Logger().Warnf("Inside /custom_path")
        ctx.Next()
    }
    b.Handle("POST", "/post_qrcode", "PostQRCode", anyMiddlewareHere)
}

func (c *ExampleController) PostQRCode(ctx iris.Context) {
    qrcode := new(QRCode)
    err := ctx.ReadJSON(&qrcode)

    if err != nil {
        ctx.StatusCode(iris.StatusBadRequest)
        ctx.WriteString(err.Error())
        fmt.Println("错误:", err.Error())
        return
    }

    // 打印出QRcode
    fmt.Println("QRCode:", qrcode.QRcode)
}

服务器调试信息：

3、注意事项：

1、防火墙端口

2、传递的参数要配套使用（这个地方弄了相当久，才找到问题）：

contentType: 'application/json',
data: JSON.stringify({
    "qrcode": r
}),

如果觉得不错，请点赞、收藏！

Neodeveloper

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用uniapp 5+app实现二维码扫描并上传到服务器

使用uniapp 5+app的demo代码，通过修改部分代码来实现扫描二维码后，将二维码内容上传至服务器（GO语言的接口）。
复制链接

扫一扫

专栏目录

使用uniapp 5+app实现二维码扫描并上传到服务器

“相关推荐”对你有帮助么？