AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【uniapp】文件授权验真系统(含代码)

2023-10-18 48
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
.cn 域名，1个 12个月
简介： 【uniapp】文件授权验真系统(含代码)

前言

吐槽：终于开通了【资源绑定】的功能了，之前还要一个一个的去贴链接

之前的同学联系我说，他们公司想做一个能将客户的证明材料通过二维码扫描显示验真结果的一个系统（经他们公司核对无误后的验真），这个功能不难开发，我们先梳理一下思路：

  1. 设计上传后显示的文件列表
  2. 具有替换、访问、删除、生成二维码、插入的功能
  3. 二维码扫描后显示验真结果

一、框架选用

这里用的是黄河爱浪大佬的B-ui插件

二、数据库设计

由于项目比较简单，只用了一个表

数据表字段 说明
id 自增id
name 文件名（废弃）
path_name 文件路径
cre_time 创建时间

三、设计上传列表

index.vue

<template>
  <view>
    <view class="b-flex-x b-bg-white b-p-32">
      <image src="/static/logo.png" mode="aspectFit" class="logo b-radius-8"></image>
      <view class="b-flex-item b-ml-32">
        <view class="b-text-B b-text-48 b-text-black">B-ui v{{BuiVersion}}</view>
        <view class="b-font-24 b-mt-8 b-text-black-dd">@园游会永不打烊</view>
      </view>
    </view>
    <!-- <view class="b-flex-grow b-ml-32" style="width: 680rpx;">
      <input type="text" class="b-form-input" placeholder="请输入名称" style="width: 680rpx;" v-model="name">
    </view> -->
    <view class="b-bg-white b-pl-32 b-pr-32 b-pt-24 b-pb-24">
      <button class="b-btn b-btn-blue b-btn-block b-btn-lg" @click="upload()">上传图片</button>
    </view>
    <view class="b-pt-32 b-pr-32 b-pl-32 b-pb-24 b-text-black-dd">图片列表</view>
    <view class="b-list-user b-bg-white">
      <view class="b-list-item"
          v-for="(item,index) in list" :key="index">
        <view class="b-flex-x">
          <view class="b-icon b-text-black-d">
            <image src="/static/tabBar/api.png" mode="widthFix" style="width: 50rpx;height: 50rpx;"></image>
          </view>
          <view style="font-size:20rpx;">{{item.cre_time}}</view>
        </view>
        <view class="btns-box">
          <button class="b-btn b-btn-blue b-btn-sm" @click="jumps_edit(item.id)">改</button>
          <button class="b-btn b-btn-blue b-btn-sm" @click="jump(item.path_name)" style="margin-left: 10rpx;">访</button>
          <button class="b-btn b-btn-blue b-btn-sm" style="margin-left: 10rpx;" @click="jumps(item.id)">码</button>
          <button class="b-btn b-btn-blue b-btn-sm" style="margin-left: 10rpx;" @click="delete_(item.id)">删</button>
        </view>
      </view>
    </view>
    <view class="b-p-32 b-text-black-dd b-text-c b-text-20">
      <view>欢迎使用 B-ui </view>
      <view class="b-mt-8">&copy; 园游会永不打烊</view>
    </view>
  </view>
</template>

四、上传操作

1.前端

视图

<view class="b-bg-white b-pl-32 b-pr-32 b-pt-24 b-pb-24">
  <button class="b-btn b-btn-blue b-btn-block b-btn-lg" @click="upload()">上传图片</button>
</view>

js

upload(){
let that=this;
console.log("我被点击了");
uni.chooseImage({
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
console.log(tempFilePaths);
uni.uploadFile({
url: 'http://域名/upload.php', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
// name:that.name
},
methods:"POST",
success: (uploadFileRes) => {
let json_data = JSON.parse(uploadFileRes.data)
console.log(uploadFileRes);
if (json_data['errCode']==0) {
uni.showToast({
title: json_data['error_message'],
icon:'none',
duration: 2000
});
} else{
}
that.get_list();
}
});
}
});
},

2.后端

<?php 
include 'conn.php';
// 上传图片 
function uploadimg($conn) { 
    $file = $_FILES['file'];
    // $name = $_REQUEST['name'];
    if ($file) { 
        // 获取文件后缀名
        $ext = pathinfo($file['name'], PATHINFO_EXTENSION);
        // 创建随机文件夹
        $folder = 'upload/' . uniqid();
        if (!is_dir($folder)) {
            mkdir($folder, 0777, true);
        }
        // 生成文件名
        $filename = '验证结果.' . $ext;
        $target = $folder . '/' . $filename;
        // 转移图片地址
        if (!move_uploaded_file($file['tmp_name'], $target)) {
            $GLOBALS['error_message'] = '上传图片失败';
            echo error_message;
        }
        $sql="INSERT INTO `img_` (`id`, `name`, `path_name`, `cre_time`) VALUES (NULL, '', '$target', CURRENT_TIMESTAMP)";
        $resss=$conn->query($sql);
        die(
            json_encode(
                array(
                    'errCode' => 0,
                    'error_message'=>'图片上传成功',
                    'file'=>$target
                ),480)
        );
    }
}
uploadimg($conn);
?>

五、修改操作

因为他们可能会对，已经上传了的文件进行替换，所以替换需要根据记录id来进行修改，将新的文件替换对应记录

所以，只需要前端传值对应的id即可

<button class="b-btn b-btn-blue b-btn-sm" @click="jumps_edit(item.id)">改</button>

js

进行图片上传，将新的地址对应id修改到数据库中

jumps_edit(id){
console.log(id)
uni.showToast({
title:'选择一张图片进行替换',
icon:'none'
})
setTimeout(function() {}, 1200);
uni.chooseImage({
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
console.log(tempFilePaths);
uni.uploadFile({
url: 'http://fzj.taila.club/upload_edit.php', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData: {
id:id
},
methods:"POST",
success: (uploadFileRes) => {
let json_data = JSON.parse(uploadFileRes.data)
console.log(uploadFileRes);
if (json_data['errCode']==0) {
uni.showToast({
title: json_data['error_message'],
icon:'none',
duration: 2000
});
uni.showToast({
title:'替换成功刷新生效',
icon:'none'
})
} else{
}
that.get_list();
}
});
}
});
}

六、访问操作

首页点击访问视图

<button class="b-btn b-btn-blue b-btn-sm" @click="jump(item.path_name)" style="margin-left: 10rpx;">访</button>

点击事件js

jumps(path){
console.log(path)
uni.navigateTo({
url:'/pages/qrcode/qrcode?path='+path
})
},

新建一个vue文件，将前端传过来的path与域名拼接即可，得到完整的文件地址,在onload事件中接收即可

video.vue

<template>
    <view>
      <view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
        <image :src="src" mode="widthFix" style="margin: auto;"></image>
      </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            src: ''
        }
    },
  onLoad(options) {
    this.src="http://fzj.taila.club/"+options.path
  },
    methods: {
    }
}
</script>

七、二维码生成

二维码生成用的链接可以是图片的url或者是上面访问操作的页面，但是客户要的效果是这个样子的：

也就是，标题必须是验真结果

所以就必须还要新建一个HTML用于显示标题，还要将图片显示出来

新建qrcode.vue文件

这里采用了qocode插件，具体是哪一个我忘记了，可以下载资源包看

二维码的url，对应拼接一下就行，例如：

"http://域名/show.php?id="+options.path，这里options.path在后面改成了id，因为替换的路径会变会导致二维码生成的图片不唯一，改成id用id去查询即可

<template xlang="wxml">
  <view class="container">
    <view class="qrimg">
      <view class="qrimg-i">
        <tki-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
      </view>
      <!-- <view class="qrimg-i">
        <tki-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
      </view> -->
    </view>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title">设置二维码大小</view>
    </view>
    <view class="body-view">
      <slider :value="size" @change="sliderchange" min="50" max="500" show-value />
    </view>
    <view class="uni-padding-wrap">
      <view class="btns">
        <button type="primary" @tap="selectIcon">选择二维码图标</button>
        <button type="primary" @tap="creatQrcode">生成二维码</button>
        <button type="primary" @tap="saveQrcode">保存到图库</button>
        <!--    <button type="warn" @tap="clearQrcode">清除二维码</button>
        <button type="warn" @tap="ifQrcode">显示隐藏二维码</button> -->
      </view>
    </view>
  </view>
</template>
<script>
  import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
  export default {
    data() {
      return {
        ifShow: true,
        val: 'http://www.taila.club', // 要生成的二维码值
        size: 300, // 二维码大小
        unit: 'upx', // 单位
        background: '#ffffff', // 背景色
        foreground: '#252625', // 前景色
        pdground: '#252625', // 角标色
        icon: '', // 二维码图标/static/logo.jpg
        iconsize: 40, // 二维码图标大小
        lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
        onval: false, // val值变化时自动重新生成二维码
        loadMake: true, // 组件加载完成后自动生成二维码
        src: '' // 二维码生成后的图片地址或base64
      }
    },
    methods: {
      sliderchange(e) {
        this.size = e.detail.value
      },
      creatQrcode() {
        this.$refs.qrcode._makeCode()
      },
      saveQrcode() {
        this.$refs.qrcode._saveCode()
      },
      qrR(res) {
        this.src = res
      },
      clearQrcode() {
        this.$refs.qrcode._clearCode()
        this.val = ''
      },
      ifQrcode() {
        this.ifShow = !this.ifShow
      },
      selectIcon() {
        let that = this
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album'], //从相册选择
          success: function (res) {
            that.icon = res.tempFilePaths[0]
            setTimeout(() => {
              that.creatQrcode()
            }, 100);
            // console.log(res.tempFilePaths);
          }
        });
      }
    },
    components: {
      tkiQrcode
    },
    onLoad(options) {
      let that = this;
      that.val="http://fzj.taila.club/show.php?id="+options.path
    },
  }
</script>
<style>
  /* @import "../../../common/icon.css"; */
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .qrimg {
    display: flex;
    justify-content: center;
  }
  .qrimg-i{
    margin-right: 10px;
  }
  slider {
    width: 100%;
  }
  input {
    width: 100%;
    margin-bottom: 20upx;
  }
  .btns {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  button {
    width: 100%;
    margin-top: 10upx;
  }
</style>

八、二维码访问

二维码生成后，访问到"http://域名/show.php文件

新建show.php

<?php
include("conn.php");
?>
<!DOCTYPE html>
<html>
<head>
    <title>验真结果查询</title>
</head>
<body>
    <?php
     $id=$_GET['id'];
    // 图片路径
    $sql="SELECT `path_name` FROM `img_` WHERE `id`='$id'";
    $res=$conn->query($sql);
    if ($row=mysqli_fetch_assoc($res)) {
        // code...
        $imagePath = $row['path_name'];
    // 获取图片的宽度和高度
    list($width, $height) = getimagesize($imagePath);
    // 设置网页标题
    echo '<script>document.title = "验真结果";</script>';
    // 加载图片
    // echo '<div style="display: flex;justify-content: center;">';
    echo '<img src="' . $imagePath . '" alt="图片">';
    // echo '</div>';
    } else {
       die("查询不到数据");
    }
    ?>
</body>
</html>

在加载图片的时候将标题改为“验真结果”

// 设置网页标题
    echo '<script>document.title = "验真结果";</script>';

九、删除操作

同理，根据id删除数据库记录即可

首页视图层

<button class="b-btn b-btn-blue b-btn-sm" style="margin-left: 10rpx;" @click="delete_(item.id)">删</button>

新建delete.php

<?php
include('conn.php');
if ($_POST) {
$id=$_POST['id'];
$sql="DELETE FROM `img_` WHERE `id` = '$id'";
$re=$conn->query($sql);
 die(
        json_encode(
            array(
            'code' => 100,
            'msg' => '删除成功'
        ),480)
);
} else {
   die(
        json_encode(
            array(
            'code' => 200,
            'msg' => '缺少参数'
        ),480)
);
}

总结

以上就是今天记录的内容，本文仅仅简单介绍了文件授权验真系统的制作过程，具体的资源包下载在这里。

文章标签：
域名
JavaScript
前端开发
数据库
关键词：
uniapp授权
uniapp系统
德宏大魔王
目录
相关文章
胡东旭
|
3月前
|
前端开发 JavaScript 应用服务中间件
【uniapp】谷歌授权登录，前端uniapp直调(含源码)
本文介绍如何在uniapp项目中实现谷歌授权登录，无需后端参与。文章分为三部分：1）谷歌授权登录流程，详细说明从用户点击登录到获取用户信息的整个过程；2）谷歌开发者控制台配置，包括创建项目、配置同意屏幕及OAuth客户端ID等步骤；3）uniapp前端实操，提供具体代码示例，展示如何获取授权码并用其交换访问令牌，最终获取用户信息
胡东旭
143 2
【uniapp】谷歌授权登录，前端uniapp直调(含源码)
肥晨
|
3月前
|
小程序 前端开发
uniapp微信小程序本地和真机调试文件图片上传成功但体验版不成功
【8月更文挑战第5天】
肥晨
121 2
如夜了我衣衫太薄便归家靠路灯
|
3月前
|
存储 前端开发 安全
Uniapp 微信公众号授权登录指南
Uniapp 微信公众号授权登录指南
如夜了我衣衫太薄便归家靠路灯
607 1
如夜了我衣衫太薄便归家靠路灯
|
3月前
|
存储 小程序 JavaScript
uniapp 微信小程序 授权 登录
uniapp 微信小程序 授权 登录
如夜了我衣衫太薄便归家靠路灯
700 1
如夜了我衣衫太薄便归家靠路灯
|
3月前
|
开发工具 Android开发
uniapp 安卓app 调起微信app 授权登录
uniapp 安卓app 调起微信app 授权登录
如夜了我衣衫太薄便归家靠路灯
354 1
handsome0916
|
4月前
|
开发者 iOS开发
uniapp打包苹果应用到哪里去获取私钥证书和证书profile文件
ios的应用，分两种安装方式，一种是上架app store的安装方式，一种是上传到一些应用内测的平台，进行扫码安装。
handsome0916
126 4
如夜了我衣衫太薄便归家靠路灯
|
3月前
|
小程序 前端开发 安全
uniapp 支付宝小程序 授权登录
uniapp 支付宝小程序 授权登录
如夜了我衣衫太薄便归家靠路灯
154 0
如夜了我衣衫太薄便归家靠路灯
|
3月前
|
存储 前端开发 Java
uniapp 苹果app，实现微信授权登录
uniapp 苹果app，实现微信授权登录
如夜了我衣衫太薄便归家靠路灯
66 0
如夜了我衣衫太薄便归家靠路灯
|
3月前
|
JavaScript 安全
uniapp实现微信支付（代码和注释很详细）
uniapp实现微信支付（代码和注释很详细）
如夜了我衣衫太薄便归家靠路灯
453 0
八音盒coding
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
八音盒coding
112 7