前言

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

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

示例效果

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

应用场景

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

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

解决图片的安全手段

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

  • HTTPS调用
  • 云调用

HTTPS 调用的请求接口地止

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

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

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

功能实现：小程序端逻辑

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

  1. <view class="image-list">
  2. <!-- 显示图片 -->
  3.    <block wx:for="{{images}}" wx:key="*this"><view class="image-wrap">
  4.        <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>
  5.    </block>
  6.    <!-- 选择图片 -->
  7.    <view class="image-wrap selectphoto" hidden="{{!selectPhoto}}" bind:tap="onChooseImage"><i class="iconfont icon-add"></i></view>
  8.    </view>
  9.    <view class="footer"><button class="send-btn"  bind:tap="send">发布</button>
  10.    </view>

对应的wxss代码

  1. .footer {
  2.   display: flex;
  3.   align-items: center;
  4.   width: 100%;
  5.   box-sizing: border-box;
  6.   background: #34bfa3;
  7. }
  9. .send-btn {
  10.   width: 100%;
  11.   color: #fff;
  12.   font-size: 32rpx;
  13.   background: #34bfa3;
  14. }
  16. button {
  17.   border-radius: 0rpx;
  18. }
  20. button::after {
  21.   border-radius: 0rpx !important;
  22. }
  24. /* 图片样式 */
  25. .image-list {
  26.   display: flex;
  27.   flex-wrap: wrap;
  28.   margin-top: 20rpx;
  29. }
  31. .image-wrap {
  32.   width: 220rpx;
  33.   height: 220rpx;
  34.   margin-right: 10rpx;
  35.   margin-bottom: 10rpx;
  36.   position: relative;
  37.   overflow: hidden;
  38.   text-align: center;
  39. }
  41. .image {
  42.   width: 100%;
  43.   height: 100%;
  44. }
  46. .icon-shanchu {
  47.   position: absolute;
  48.   top: 0;
  49.   right: 0;
  50.   width: 40rpx;
  51.   height: 40rpx;
  52.   background-color: #000;
  53.   opacity: 0.4;
  54.   color: #fff;
  55.   text-align: center;
  56.   line-height: 40rpx;
  57.   font-size: 38rpx;
  58.   font-weight: bolder;
  59. }
  61. .selectphoto {
  62.   border: 2rpx dashed #cbd1d7;
  63.   position: relative;
  64. }
  66. .icon-add {
  67.   position: absolute;
  68.   top: 50%;
  69.   left: 50%;
  70.   transform: translate(-50%, -50%);
  71.   color: #cbd1d7;
  72.   font-size: 60rpx;
  73. }

最终呈现的UI,由于只是用于图片检测演示,UI方面可忽略,如下所示

对应的JS代码

  1. /*
  2. * 涉及到的API:wx.chooseImage  从本地相册选择图片或使用相机拍照
  3. *(https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)
  5. *
  6. *
  7. */// 最大上传图片数量
  8. const MAX_IMG_NUM = 9;
  10. const db = wx.cloud.database(); // 初始化云数据库
  11. Page({
  13.   /**
  14.    * 页面的初始数据
  15.    */
  16.   data: {
  17.     images: [],  // 把上传的图片存放在一个数组对象里面
  18.     selectPhoto: true, // 添加+icon元素是否显示
  19.   },
  21.   /**
  22.    * 生命周期函数--监听页面加载
  23.    */
  24.   onLoad: function (options) {
  26.   },
  28.   // 选择图片
  29.   onChooseImage() {
  30.     // 还能再选几张图片,初始值设置最大的数量-当前的图片的长度
  31.     let max = MAX_IMG_NUM - this.data.images.length;
  32.     wx.chooseImage({
  33.       count: max,               // count表示最多可以选择的图片张数
  34.       sizeType: ['original', 'compressed'], //  所选的图片的尺寸
  35.       sourceType: ['album', 'camera'],  // 选择图片的来源
  36.       success: (res) => {                     // 接口调用成功的回调函数console.log(res)
  37.         this.setData({                       // tempFilePath可以作为img标签的src属性显示图片,下面是将后添加的图片与之前的图片给追加起来
  38.           images: this.data.images.concat(res.tempFilePaths)
  39.         })
  40.         // 还能再选几张图片
  41.         max = MAX_IMG_NUM - this.data.images.length
  42.         this.setData({
  43.           selectPhoto: max <= 0 ? false : true  // 当超过9张时,加号隐藏
  44.         })
  45.       },
  46.     })
  47.   },
  49.   // 点击右上方删除图标,删除图片操作
  50.   onDelImage(event) {
  51.     const index = event.target.dataset.index;
  52.     // 点击删除当前图片,用splice方法,删除一张,从数组中移除一个
  53.     this.data.images.splice(index, 1)
  54.     this.setData({
  55.       images: this.data.images
  56.     })
  57.     // 当添加的图片达到设置最大的数量时,添加按钮隐藏,不让新添加图片
  58.     if (this.data.images.length == MAX_IMG_NUM - 1) {
  59.       this.setData({
  60.         selectPhoto: true,
  61.       })
  62.     }
  63.   },
  64. })

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

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

功能实现：云函数侧逻辑

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

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

  1. {
  2.   "permissions": {
  3.     "openapi": [
  4.       "security.imgSecCheck"
  5.     ]
  6.   }
  7. }

配置完后,在主入口index.js中,如下所示,通过security.imgSecCheck接口,并传入media对象

  1. // 云函数入口文件
  2. const cloud = require('wx-server-sdk');
  3. cloud.init({
  4.   env: cloud.DYNAMIC_CURRENT_ENV
  5. })
  7. // 云函数入口函数
  8. exports.main = async (event, context) => {
  9.   const wxContext = cloud.getWXContext()
  10.   try {
  11.     const result = await cloud.openapi.security.imgSecCheck({
  12.       media: {
  13.         contentType: 'image/png',
  14.         value: Buffer.from(event.img)   // 这里必须要将小程序端传过来的进行Buffer转化,否则就会报错,接口异常
  15.       }
  17.     })
  19.     if (result && result.errCode.toString() === '87014') {
  20.       return { code: 500, msg: '内容含有违法违规内容', data: result }
  21.     } else {
  22.       return { code: 200, msg: '内容ok', data: result }
  23.     }
  24.   } catch (err) {
  25.     // 错误处理
  26.     if (err.errCode.toString() === '87014') {
  27.       return { code: 500, msg: '内容含有违法违规内容', data: err }
  28.     }
  29.     return { code: 502, msg: '调用imgSecCheck接口异常', data: err }
  30.   }
  31. }

您会发现在云函数端,就这么几行代码,就完成了图片安全校验

而在小程序端,代码如下所示

  1. // miniprogram/pages/imgSecCheck/imgSecCheck.js
  2. // 最大上传图片数量
  3. const MAX_IMG_NUM = 9;
  5. const db = wx.cloud.database()
  6. Page({
  8.   /**
  9.    * 页面的初始数据
  10.    */
  11.   data: {
  12.     images: [],
  13.     selectPhoto: true, // 添加图片元素是否显示
  14.   },
  16.   /**
  17.    * 生命周期函数--监听页面加载
  18.    */
  19.   onLoad: function (options) {
  21.   },
  22.   // 选择图片
  23.   onChooseImage() {
  24.     // const that = this;  // 如果下面用了箭头函数,那么这行代码是不需要的,直接用this就可以了的// 还能再选几张图片,初始值设置最大的数量-当前的图片的长度
  25.     let max = MAX_IMG_NUM - this.data.images.length;
  26.     wx.chooseImage({
  27.       count: max,
  28.       sizeType: ['original', 'compressed'],
  29.       sourceType: ['album', 'camera'],
  30.       success: (res) => {  // 这里若不是箭头函数,那么下面的this.setData的this要换成that上面的临时变量,作用域的问题,不清楚的,可以看下this指向相关的知识
  31.        console.log(res)
  32.        // tempFilePath可以作为img标签的src属性显示图片
  33.         const  tempFiles = res.tempFiles;
  34.         this.setData({
  35.           images: this.data.images.concat(res.tempFilePaths)
  36.         })
  37.         // 在选择图片时,对本地临时存储的图片,这个时候,进行图片的校验,当然你放在最后点击发布时,进行校验也是可以的,只不过是一个前置校验和后置校验的问题,我个人倾向于在选择图片时就进行校验的,选择一些照片时,就应该在选择时阶段做安全判断的, 小程序端请求云函数方式// 图片转化buffer后，调用云函数
  38.         console.log(tempFiles);
  39.         tempFiles.forEach(items => {
  40.           console.log(items);
  41.           // 图片转化buffer后，调用云函数
  42.           wx.getFileSystemManager().readFile({
  43.             filePath: items.path,
  44.             success: res => {
  45.                   console.log(res);
  46.                    wx.cloud.callFunction({  // 小程序端请求imgSecCheck云函数,并传递img参数进行检验
  47.                     name: 'imgSecCheck',
  48.                     data: {
  49.                       img: res.data
  50.                     }
  51.             })
  52.             .then(res => {
  53.                console.log(res);
  54.                let { errCode } = res.result.data;
  55.                switch(errCode) {
  56.                  case 87014:
  57.                    this.setData({
  58.                       resultText: '内容含有违法违规内容'
  59.                    })
  60.                    break;
  61.                  case 0:
  62.                    this.setData({
  63.                      resultText: '内容OK'
  64.                    })
  65.                    break;
  66.                  default:
  67.                    break;
  68.                }
  70.             })
  71.             .catch(err => {
  72.                console.error(err);
  73.             })
  74.             },
  75.             fail: err => {
  76.               console.error(err);
  77.             }
  78.           })
  79.         })
  81.         // 还能再选几张图片
  82.         max = MAX_IMG_NUM - this.data.images.length
  83.         this.setData({
  84.           selectPhoto: max <= 0 ? false : true  // 当超过9张时,加号隐藏
  85.         })
  86.       },
  87.     })
  88.   },
  90.   // 删除图片
  91.   onDelImage(event) {
  92.     const index =  event.target.dataset.index;
  93.     // 点击删除当前图片,用splice方法,删除一张,从数组中移除一个
  94.     this.data.images.splice(index, 1);
  95.     this.setData({
  96.       images: this.data.images
  97.     })
  98.     // 当添加的图片达到设置最大的数量时,添加按钮隐藏,不让新添加图片
  99.     if (this.data.images.length == MAX_IMG_NUM - 1) {
  100.       this.setData({
  101.         selectPhoto: true,
  102.       })
  103.     }
  104.   },
  105. })

示例效果如下所示:

至此,关于图片安全检测就已经完成了,您只需要根据检测的结果,做一些友好的用户提示,或者做一些自己的业务逻辑判断即可

常见问题

如何对上传的图片大小进行限制

有时候,您需要对用户上传图片的大小进行限制,限制用户任意上传超大图片,那怎么处理呢,在微信小程序里面,主要借助的是wx.chooseImage这个接口成功返回后临时路径的res.tempFiles中的size大小判断即可进行处理

具体实例代码如下所示

  1. // 选择图片
  2.   onChooseImage() {
  3.     // 还能再选几张图片,初始值设置最大的数量-当前的图片的长度
  4.     let max = MAX_IMG_NUM - this.data.images.length;
  5.     wx.chooseImage({
  6.       count: max,
  7.       sizeType: ['original', 'compressed'],
  8.       sourceType: ['album', 'camera'],
  9.       success: (res) => {
  10.         console.log(res)
  11.         const  tempFiles = res.tempFiles;
  12.         this.setData({
  13.           images: this.data.images.concat(res.tempFilePaths)  // tempFilePath可以作为img标签的src属性显示图片
  14.         })
  15.         // 在选择图片时,对本地临时存储的图片,这个时候,进行图片的校验,当然你放在最后点击发布时,进行校验也是可以的,只不过是一个前置校验和后置校验的问题,我个人倾向于在选择图片时就进行校验的,选择一些照片时,就应该在选择时阶段做安全判断的, 小程序端请求云函数方式// 图片转化buffer后，调用云函数
  16.         console.log(tempFiles);
  17.         tempFiles.forEach(items => {
  18.           if (items && items.size > 1 * (1024 * 1024)) {  // 限制图片的大小
  19.             wx.showToast({
  20.               icon: 'none',
  21.               title: '上传的图片超过1M,禁止用户上传',
  22.               duration: 4000
  23.             })
  24.             // 超过1M的图片,禁止用户上传
  25.           }
  26.           console.log(items);
  27.           // 图片转化buffer后，调用云函数
  28.           wx.getFileSystemManager().readFile({
  29.             filePath: items.path,
  30.             success: res => {
  31.                   console.log(res);
  32.                    wx.cloud.callFunction({   // 请求调用云函数imgSecCheck
  33.                     name: 'imgSecCheck',
  34.                     data: {
  35.                       img: res.data
  36.                     }
  37.             })
  38.             .then(res => {
  39.                console.log(res);
  40.                let { errCode } = res.result.data;
  41.                switch(errCode) {
  42.                  case 87014:
  43.                    this.setData({
  44.                       resultText: '内容含有违法违规内容'
  45.                    })
  46.                    break;
  47.                  case 0:
  48.                    this.setData({
  49.                      resultText: '内容OK'
  50.                    })
  51.                    break;
  52.                  default:
  53.                    break;
  54.                }
  55.             })
  56.             .catch(err => {
  57.                console.error(err);
  58.             })
  59.             },
  60.             fail: err => {
  61.               console.error(err);
  62.             }
  63.           })
  64.         })
  66.         // 还能再选几张图片
  67.         max = MAX_IMG_NUM - this.data.images.length
  68.         this.setData({
  69.           selectPhoto: max <= 0 ? false : true  // 当超过9张时,加号隐藏
  70.         })
  71.       },
  72.     })
  73.   },

注意: 使用微信官方的图片内容安全接口进行校验,限制图片大小限制:1M,否则的话就会报错

也就是说,对于超过1M大小的违规图片,微信官方提供的这个图片安全接口是无法进行校验的

这个根据自己的业务而定,在小程序端对用户上传图片的大小进行限制如果您觉得微信官方提供的图片安全接口满足不了自己的业务需求,那么可以选择一些其他的图片内容安全校验的接口的

这个图片安全校验是非常有必要的,用户一旦上传非法图片,一旦通过网络进行传播,产生了社会影响,平台是有责任的,这种前车之鉴是有的

如何解决多图上传覆盖的问题

对于上传图片来说,这个wx.cloud.uploadFileAPI接口只能上传一张图片,但是很多时候,是需要上传多张图片到云存储当中的,当点击发布的时候,我们是希望将多张图片都上传到云存储当中去的

这个API虽然只能每次上传一张,但您可以循环遍历多张图片,然后一张一张的上传的

在cloudPath上传文件的参数当中,它的值:需要注意:文件的名称

那如何保证上传的图片不被覆盖,文件不重名的情况下就不会被覆盖

而在选择图片的时候,不应该上传,因为用户可能有删除等操作,如果直接上传的话会造成资源的浪费

而应该在点发布按钮的时候,才执行上传操作,文件不重名覆盖的示例代码如下所示

  1.       let promiseArr = []
  2.       let fileIds = []      // 将图片的fileId存放到一个数组中
  3.       let imgLength = this.data.images.length;
  4.       // 图片上传
  5.       for (let i = 0; i < imgLength; i++) {
  6.         let p = new Promise((resolve, reject) => {
  7.         let item = this.data.images[i]
  8.           // 文件扩展名
  9.           let suffix = /\.\w+$/.exec(item)[0]; // 取文件后拓展名
  10.           wx.cloud.uploadFile({      // 利用官方提供的上传接口
  11.             cloudPath: 'blog/' + Date.now() + '-' + Math.random() * 1000000 + suffix,  // 云存储路径,您也可以使用es6中的模板字符串进行拼接的
  12.             filePath: item,   // 要上传文件资源的路径
  13.             success: (res) => {
  14.               console.log(res);
  15.               console.log(res.fileID)
  16.               fileIds = fileIds.concat(res.fileID)       // 将新上传的与之前上传的给拼接起来
  17.               resolve()
  18.             },
  19.             fail: (err) => {
  20.               console.error(err)
  21.               reject()
  22.             }
  23.           })
  24.         })
  25.         promiseArr.push(p)
  26.       }
  27.       // 存入到云数据库,其中这个Promise.all(),等待里面所有的任务都执行之后,在去执行后面的任务,也就是等待上传所有的图片上传完后,才能把相对应的数据存到数据库当中,具体与promise相关问题,可自行查漏
  28.       Promise.all(promiseArr).then((res) => {
  29.           db.collection('blog').add({ // 查找blog集合,将img,时间等数据添加到这个集合当中
  30.             data: {
  31.               img: fileIds,
  32.               createTime: db.serverDate(), // 服务端的时间
  33.             }
  34.           }).then((res) => {
  35.             console.log(res);
  36.             this._hideToastTip();
  37.             this._successTip();
  38.           })
  39.         })
  40.         .catch((err) => {
  41.           // 发布失败console.error(err);
  42.         })

上面通过利用当前时间+随机数的方式进行了一个区分,规避了上传文件同名的问题

因为这个上传接口,一次性只能上传一张图片,所以需要循环遍历图片,然后一张张的上传

一个是上传到云存储中,另一个是添加到云数据库集合当中,要分别注意下这两个操作,云数据库中的图片是从云存储中拿到的,然后再添加到云数据库当中去的

示例效果如下所示:

将上传的图片存储到云数据库中

注意:添加数据到云数据库中,需要手动创建集合,不然是无法上传不到云数据库当中的,会报错

至此,关于敏感图片的检测,以及多图片的上传到这里就已经完成了

如下是完整的小程序端逻辑示例代码

  1. // miniprogram/pages/imgSecCheck/imgSecCheck.js
  2. // 最大上传图片数量
  3. const MAX_IMG_NUM = 9;
  4. const db = wx.cloud.database()
  5. Page({
  7.   /**
  8.    * 页面的初始数据
  9.    */
  10.   data: {
  11.     images: [],
  12.     selectPhoto: true, // 添加图片元素是否显示
  13.   },
  15.   /**
  16.    * 生命周期函数--监听页面加载
  17.    */
  18.   onLoad: function (options) {
  20.   },
  22.   // 选择图片
  23.   onChooseImage() {
  24.     // 还能再选几张图片,初始值设置最大的数量-当前的图片的长度
  25.     let max = MAX_IMG_NUM - this.data.images.length;
  26.     wx.chooseImage({
  27.       count: max,
  28.       sizeType: ['original', 'compressed'],
  29.       sourceType: ['album', 'camera'],
  30.       success: (res) => {
  31.         console.log(res)
  32.         const tempFiles = res.tempFiles;
  33.         this.setData({
  34.           images: this.data.images.concat(res.tempFilePaths) // tempFilePath可以作为img标签的src属性显示图片
  35.         })
  36.         // 在选择图片时,对本地临时存储的图片,这个时候,进行图片的校验,当然你放在最后点击发布时,进行校验也是可以的,只不过是一个前置校验和后置校验的问题,我个人倾向于在选择图片时就进行校验的,选择一些照片时,就应该在选择时阶段做安全判断的, 小程序端请求云函数方式
  37.         // 图片转化buffer后，调用云函数
  38.         console.log(tempFiles);
  39.         tempFiles.forEach(items => {
  40.           if (items && items.size > 1 * (1024 * 1024)) {
  41.             wx.showToast({
  42.               icon: 'none',
  43.               title: '上传的图片超过1M,禁止用户上传',
  44.               duration: 4000
  45.             })
  46.             // 超过1M的图片,禁止上传
  47.           }
  48.           console.log(items);
  49.           // 图片转化buffer后，调用云函数
  50.           wx.getFileSystemManager().readFile({
  51.             filePath: items.path,
  52.             success: res => {
  53.               console.log(res);
  54.               this._checkImgSafe(res.data); // 检测图片安全校验
  55.             },
  56.             fail: err => {
  57.               console.error(err);
  58.             }
  59.           })
  60.         })
  62.         // 还能再选几张图片
  63.         max = MAX_IMG_NUM - this.data.images.length
  64.         this.setData({
  65.           selectPhoto: max <= 0 ? false : true // 当超过9张时,加号隐藏
  66.         })
  67.       },
  68.     })
  69.   },
  71.   // 删除图片
  72.   onDelImage(event) {
  73.     const index = event.target.dataset.index;
  74.     // 点击删除当前图片,用splice方法,删除一张,从数组中移除一个
  75.     this.data.images.splice(index, 1);
  76.     this.setData({
  77.       images: this.data.images
  78.     })
  79.     // 当添加的图片达到设置最大的数量时,添加按钮隐藏,不让新添加图片
  80.     if (this.data.images.length == MAX_IMG_NUM - 1) {
  81.       this.setData({
  82.         selectPhoto: true,
  83.       })
  84.     }
  85.   },
  87.   // 点击发布按钮,将图片上传到云数据库当中
  88.   send() {
  89.     const images = this.data.images.length;
  90.     if (images) {
  91.       this._showToastTip();
  92.       let promiseArr = []
  93.       let fileIds = []
  94.       let imgLength = this.data.images.length;
  95.       // 图片上传
  96.       for (let i = 0; i < imgLength; i++) {
  97.         let p = new Promise((resolve, reject) => {
  98.           let item = this.data.images[i]
  99.           // 文件扩展名
  100.           let suffix = /\.\w+$/.exec(item)[0]; // 取文件后拓展名
  101.           wx.cloud.uploadFile({   // 上传图片至云存储,循环遍历,一张张的上传
  102.             cloudPath: 'blog/' + Date.now() + '-' + Math.random() * 1000000 + suffix,
  103.             filePath: item,
  104.             success: (res) => {
  105.               console.log(res);
  106.               console.log(res.fileID)
  107.               fileIds = fileIds.concat(res.fileID)
  108.               resolve()
  110.             },
  111.             fail: (err) => {
  112.               console.error(err)
  113.               reject()
  114.             }
  115.           })
  116.         })
  117.         promiseArr.push(p)
  118.       }
  119.       // 存入到云数据库
  120.       Promise.all(promiseArr).then((res) => {
  121.           db.collection('blog').add({ // 查找blog集合,将数据添加到这个集合当中
  122.             data: {
  123.               img: fileIds,
  124.               createTime: db.serverDate(), // 服务端的时间
  125.             }
  126.           }).then((res) => {
  127.             console.log(res);
  128.             this._hideToastTip();
  129.             this._successTip();
  130.           })
  131.         })
  132.         .catch((err) => {
  133.           // 发布失败
  134.           console.error(err);
  135.         })
  136.     } else {
  137.       wx.showToast({
  138.         icon: 'none',
  139.         title: '没有选择任何图片,发布不了',
  140.       })
  141.     }
  143.   },
  145.   // 校验图片的安全
  146.   _checkImgSafe(data) {
  147.     wx.cloud.callFunction({
  148.         name: 'imgSecCheck',
  149.         data: {
  150.           img: data
  151.         }
  152.       })
  153.       .then(res => {
  154.         console.log(res);
  155.         let {
  156.           errCode
  157.         } = res.result.data;
  158.         switch (errCode) {
  159.           case 87014:
  160.             this.setData({
  161.               resultText: '内容含有违法违规内容'
  162.             })
  163.             break;
  164.           case 0:
  165.             this.setData({
  166.               resultText: '内容OK'
  167.             })
  168.             break;
  169.           default:
  170.             break;
  171.         }
  172.       })
  173.       .catch(err => {
  174.         console.error(err);
  175.       })
  176.   },
  178.   _showToastTip() {
  179.     wx.showToast({
  180.       icon: 'none',
  181.       title: '发布中...',
  182.     })
  183.   },
  185.   _hideToastTip() {
  186.     wx.hideLoading();
  187.   },
  189.   _successTip() {
  190.     wx.showToast({
  191.       icon: 'none',
  192.       title: '发布成功',
  193.     })
  194.   },
  195. })

完整的示例wxml,如下所示

  1. <view class="image-list">
  2. <!-- 显示图片 -->
  3. <block wx:for="{{images}}" wx:key="*this">
  4.      <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>
  5.      </view>
  6. </block>
  7. <!-- 选择图片 -->
  8. <view class="image-wrap selectphoto" hidden="{{!selectPhoto}}" bind:tap="onChooseImage"><i class="iconfont icon-add"></i></view>
  9. </view>
  10. <view class="footer">
  11.    <button class="send-btn"  bind:tap="send">发布</button>
  12. </view>
  13. <view>
  14.     检测结果显示: {{ resultText }}
  15. </view>

您可以根据自己的业务逻辑需要,一旦检测到图片违规时,禁用按钮状态,或者给一些用户提示,都是可以的,在发布之前或者点击发布时,进行图片内容安全的校验都可以,一旦发现图片有违规时,就不让继续后面的操作的

结语

本文主要通过借助官方提供的图片security.imgSecCheck

接口,实现了对图片安全的校验,实现起来,是相当的方便的,对于基础性的校验,利用官方提供的这个接口,已经够用了的,但是如果想要更加严格的检测,可以引入一些第三方的内容安全强强校验,确保内容的安全

实现了如何对上传的图片大小进行限制,以及解决同名图片上传覆盖的问题

如果大家对文本内容安全校验以及图片安全校验仍然有什么问题,可以在下方留言,一起探讨。

公众号：腾讯云云开发

腾讯云云开发：https://cloudbase.net

云开发控制台：https://console.cloud.tencent.com/tcb?from=12304

更多精彩

扫描二维码了解更多

用云开发Cloudbase，实现小程序多图片内容安全监测的更多相关文章

  1. 微信小程序云开发－从0打造云音乐全栈小程序

    第1章 首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...

  2. 基于云开发 CloudBase 搭建在线视频会议应用教程

    基于云开发 CloudBase 搭建在线视频会议应用 在线视频会议应用是基于浏览器的能力 WebRTC 以及 腾讯云开发 CloudBase 能力构建而成的应用. 在云开发的助力下, 一个复杂的在线会 ...

  3. 有哪些适合个人开发的微信小程序

    微信小程序提供了一个简单.高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务. 微信小程序支持采用云开发模式,无需后台服务,十分的方便快捷,适合个人开发一些工具 ...

  4. 开发一个微信小程序教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可. 2.注册成功后进入首页,在 小程序发布流程->小程序 ...

  5. 开发一个微信小程序项目教程

    一.注册小程序账号 1.进入微信公众平台(https://mp.weixin.qq.com/),注册小程序账号,根据提示填写对应的信息即可.2.注册成功后进入首页,在 小程序发布流程->小程序开 ...

  6. 如何快速地开发一个微信小程序

    如何快速地开发一个微信小程序呢?我觉得作为初学者,最好能有一个模板,然后改这个模板. 同样作为初学者,刚开始的时候我有下面的几个问题,后来通过问同学,我弄清楚了. 微信小程序可以连接MySQL或者Sq ...

  7. Java可视化日历（Date类、DATe Format类、Calendar类综合运用），开发可视化日历小程序

    Java时间日期类综合运用,开发可视化日历小程序 由键盘输入指定格式的日期,打印这个月的日历 1.代码 import java.text.DateFormat; import java.text.Pa ...

  8. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  9. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

随机推荐

  1. 浅析常见的 Web 安全预防

    1. CSRF 跨站请求伪造,英文名:Cross-site request forgery CSRF 攻击流程 结合下面这张图说明 CSRF 的攻击流程. 李四在网站 A 注册了用户名,并且登录到了网 ...

  2. Docker之从零开始制作docker镜像

    以前学习docker是直接docker pull命令直接拉取Linux中已有镜像,并创建容器,添加应用程序,但是docker镜像一开始是怎么来的呢?下面将从零开始介绍整个docker镜像的制作过程(初 ...

  3. Java集合类: Set、List、Map

    Set.List.Map都是集合接口   set --其中的值不允许重复,无序的数据结构   list   --其中的值允许重复,因为其为有序的数据结构   map--成对的数据结构,健值必须具有唯一 ...

  4. String的正则函数

    String的正则函数: 查找敏感词: 4种情况 1. 查找一个固定的敏感词的位置i: var i=str.indexOf("敏感词",fromi) 在str中,从fromi位置开 ...

  5. iframe中有ajax，设置iframe自适应高度

    ------------------------------------------------------------------- http://www.jb51.net/article/1578 ...

  6. 你还不懂 Tomcat 的优化吗？

    前言 Tomcat 服务器是一个开源的轻量级Web应用服务器,在中小型系统和并发量小的场合下被普遍使用,是开发和调试Servlet.JSP 程序的首选.相信大家对于 Tomcat 已经是非常熟悉了,本 ...

  7. Linux下搭建mongDB环境

    参考: https://blog.csdn.net/qq_35763837/article/details/79654023 https://www.linuxidc.com/Linux/2016-0 ...

  8. HomeLede 2020.5.27更新 UPnP+NAS+多拨+网盘+DNS优化+帕斯沃/Clash 无缝集成+软件包

    交流群:QQ 1030484865 电报 t.me/t_homelede   固件说明 基于Lede OpenWrt R2020.5.20版本(源码截止2020.5.27)及若干自行维护的软件包 结合 ...

  9. Linux实验

    实验一 Linux系统安装与简单配置 一.实验目的 1．掌握Linux系统安装的分区准备. 2．掌握Linux系统的安装步骤. 3．掌握Linux系统分区的挂载和卸载. 4．掌握Linux系统的启动和 ...

  10. 利用metasploit复现永恒之蓝

    环境 目标机器:windows 7 ,172.16.136.169 攻击机:安装了Metasploit 的 ubuntu16.04 ,172.16.136.130 (安装Metasploit:在 Ub ...