小程序-云开发-多图片内容安全检测-优快云博客

本文链接：https://blog.youkuaiyun.com/wzc_coder/article/details/106369008

本文介绍了在小程序开发中如何进行图片安全检测，包括使用云开发的云调用功能进行内容安全检查，防止敏感违规图片上传，并展示了如何限制上传图片大小以避免超大图片，以及解决多图上传时的覆盖问题。此外，还提到了对用户上传图片大小进行限制的处理方法，以及在云数据库中存储图片的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

━━━━━━

我希望您保持空杯

一边阅读一边思考

更重要是要动手敲

如果有收获三连击

作者 | 随笔川迹

ID | suibichuanji

前言

撰文:川川

相比于文本的安全检测,图片的安全检测要稍微略复杂一些,当您读完本篇,将get到

图片安全检测的应用场景
解决图片的安全方式
使用云开发中云调用方式对图片进行检测
如何对上传图片大小进行限制
如何解决多图上传覆盖问题

如有收获,不忘三连击(给赞,留言,分享~)

· 正 · 文 · 来 · 啦 ·

先看一下示例效果

当用户上传敏感违规图片时,禁止用户上传发布,并且做出相对应的用户友好提示

(当上传敏感违规图片时,禁止上传)

完成UI展示

对于wxml与wxss,大家可以自行任意修改,本文重点在于图片安全的校验

<view class="image-list">
   <!-- 显示图片 -->
   <block wx:for="{
   
   {images}}" wx:key="*this"><view class="image-wrap">
       <image class="image" src="{
   
   {item}}" mode="aspectFill" bind:tap="onPreviewImage" data-imgsrc="{
   
   {item}}"></image><i class="iconfont icon-shanchu" bind:tap="onDelImage" data-index="{
   
   {index}}"></i></view>
   </block>
   <!-- 选择图片 -->
   <view class="image-wrap selectphoto" hidden="{
   
   {!selectPhoto}}" bind:tap="onChooseImage">
        <i class="iconfont icon-add"></i>
   </view>
</view>
<view class="footer">
    <button class="send-btn"  bind:tap="send">发布</button>
 </view>

对应的wxss代码

.footer {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  background: #34bfa3;
}

.send-btn {
  width: 100%;
  color: #fff;
  font-size: 32rpx;
  background: #34bfa3;
}

button {
  border-radius: 0rpx;
}

button::after {
  border-radius: 0rpx !important;
}

/* 图片样式 */.image-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}

.image-wrap {
  width: 220rpx;
  height: 220rpx;
  margin-right: 10rpx;
  margin-bottom: 10rpx;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.image {
  width: 100%;
  height: 100%;
}

.icon-shanchu {
  position: absolute;
  top: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background-color: #000;
  opacity: 0.4;
  color: #fff;
  text-align: center;
  line-height: 40rpx;
  font-size: 38rpx;
  font-weight: bolder;
}

.selectphoto {
  border: 2rpx dashed #cbd1d7;
  position: relative;
}

.icon-add {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #cbd1d7;
  font-size: 60rpx;
}

最终呈现的UI,如下所示

对应的JS代码

/*
* 涉及到的API:wx.chooseImage 从本地相册选择图片或使用相机拍照
*(https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)


*
*
*/
// 最大上传图片数量
const MAX_IMG_NUM = 9;

const db = wx.cloud.database(); // 初始化云数据库
Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: [], // 把上传的图片存放在一个数组对象里面
    selectPhoto: true, // 添加+icon元素是否显示
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  // 选择图片
  onChooseImage() {
    // 还能再选几张图片,初始值设置最大的数量-当前的图片的长度let max = MAX_IMG_NUM - this.data.images.length;
    wx.chooseImage({
      count: max, // count表示最多可以选择的图片张数
      sizeType: ['original', 'compressed'], // 所选的图片的尺寸
      sourceType: ['album', 'camera'], // 选择图片的来源
      success: (res) => { // 接口调用成功的回调函数console.log(res)
        this.setData({ // tempFilePath可以作为img标签的src属性显示图片,下面是将后添加的图片与之前的图片给追加起来
          images: this.data.images.concat(res.tempFilePaths)
        })
        // 还能再选几张图片
        max = MAX_IMG_NUM - this.data.images.length
        this.setData({
          selectPhoto: max <= 0 ? false : true  // 当超过9张时,加号隐藏
        })
      },
    })
  },

  // 点击右上方删除图标,删除图片操作
  onDelImage(event) {
    const index = event.target.dataset.index;
    // 点击删除当前图片,用splice方法,删除一张,从数组中移除一个this.data.images.splice(index, 1)
    this.setData({
      images: this.data.images
    })
    // 当添加的图片达到设置最大的数量时,添加按钮隐藏,不让新添加图片if (this.data.images.length == MAX_IMG_NUM - 1) {
      this.setData({
        selectPhoto: true,
      })
    }
  },
})

最终实现的前端UI效果如下所是:

现在看到的效果,没有任何云函数代码,只是前端的静态展示,对于一些涉嫌敏感图片,是有必要进行做过滤处理的

应用场景

通常,在校验一张图片是否含有违法违规内容相比于文本安全的校验,同样重要,有如下应用

图片智能鉴黄：涉及拍照的工具类应用(如美拍，识图类应用)用户拍照上传检测；电商类商品上架图片检测；媒体类用户文章里的图片检测等
敏感人脸识别：用户头像；媒体类用户文章里的图片检测；社交类用户上传的图片检测等,凡是有用户自发生产内容的都应当提前做检测

解决图片安全的方式

在小程序开发中,提供了两种方式

HTTPS调用
云调用

HTTPS 调用的请求接口地止

https://api.weixin.qq.com/wxa/img_sec_check?access_token=ACCESS_TOKEN

检测图片审核,根据官方文档得知,需要两个必传的参数:分别是:access_token(接口调用凭证),media(要检测的图片文件)

对于HTTPS调用方式,愿意折腾的小伙伴可以参考文本内容安全检测(上篇)的处理方式,处理大同小异,本篇主要以云开发的云调用为主

云调用方式

在cloudfunctions目录文件夹下创建云函数imgSecCheck

并在该目录下创建config.json,配置参数如下所示

{
  "permissions": {
    "openapi": [
      "security.imgSecCheck"