小程序云开发多图上传调用图片内容安全API

微信官方现在要求必须在小程序中加入内容审核,不然就审核拒绝,拒绝原因是用户上传图片可能存在违法违规问题,程序必须有审核机制。

在这里插入图片描述

图片内容安全API官方文档

图片内容安全检测:
1:能力描述:图片内容安全基于腾讯海量数据资源和深度学习技术,为互联网企业用户提供图片内容的智能审核服务,不仅能帮助用户降低色情、时政违规、暴力恐怖等风险,还能大幅度节省人工审核成本,保护业务健康发展。
通过学习和分析图片影像的肤色、姿态和场景等多种维度,可对图片进行色情识别。
提供包括敏感人物的面部识别与敏感事件等的场景识别。
基于舆情分析,提供更为严格的暴恐模型,智能识别暴力、血腥场景及恐怖主义、极端主义等涉嫌违禁的图片内容。
2:应用场景:用户自定义头像检测、涉及拍照的工具类应用(如P图,自拍类应用)用户拍照上传检测;电商类商品上架图片检测;媒体类用户文章里的图片检测;社交类用户上传的图片检测等。
3:应用场景举例:
(1)图片智能鉴黄:涉及拍照的工具类应用(如美拍,识图类应用)用户拍照上传检测;电商类商品上架图片检测;媒体类用户文章里的图片检测等;
(2)敏感人脸识别:用户头像;媒体类用户文章里的图片检测;社交类用户上传的图片检测等。 频率限制:单个 appId 调用上限为 2000 次/分钟,200,000 次/天*(图片大小限制:1M) *服务市场:**通过服务市场使用可以有更多的能力。

在这里插入图片描述

图片内容API云调用的代码实现

首先创建云函数imgcheck。

// imgcheck/index.js
// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  try {
    const res = await cloud.openapi.security.imgSecCheck({
      media: {
        contentType: 'image/png',
        value: Buffer.from(event.imgcontent)
      }
    })
    console.log("res", res)
    return res;
  } catch (err) {
    console.log("err", err)
    return err;
  }
}

在 config.json 中配置 security.imgSecCheck API 的权限。

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

至此云函数写好了,然后上传并部署云函数。
然后在表单提交页面中调用该云函数

<!-- 这里使用了vant-weapp组件 -->
<!-- form.wxml -->
<van-uploader file-list="{{ fileList }}" bind:before-read="beforeRead" bind:after-read="afterRead" bind:delete="delete" multiple="true" max-count="9" bind:click-preview="clickPreview" use-before-read="{{ true }}" />
// form.js
 var that = this;
 const file_path =  "picture_images/";

 data: {
    fileList: [],
    images: [],
    flag: true,
  },

 beforeRead(event) {
    this.data.flag = true
    const {
      file,
      callback = () => {}
    } = event.detail;
    for (var i = 0; i < file.length; i++) {
      //使用getFileSystemManager获取图片的Buffer流
      wx.getFileSystemManager().readFile({
        filePath: file[i].path,
        success: (res) => {
          const buffer = res.data;
          //调用云函数进行审核
          wx.cloud.callFunction({
            name: 'imgcheck',
            data: {
              imgcontent: buffer
            },
            success(r) {
              //存在违规
              if (r.result.errCode != 0) {
                that.data.flag = false
                wx.showModal({
                  title: '违规提示',
                  content: '图片违规',
                  showCancel: false,
                  confirmColor: '#DC143C',
                })
              }
            }
          })
        }
      })
    }
    setTimeout(function () {
      callback(that.data.flag)
    }, 1500) //延迟时间

  },

  afterRead(event) {
    const {
      file
    } = event.detail;
    this.setData({
      fileList: this.data.fileList.concat(file),
    })
  },

  delete(event) {
    const {
      index,
      name
    } = event.detail;
    const fileList = this.data[`fileList${name}`];
    fileList.splice(index, 1);
    this.setData({
      [`fileList${name}`]: fileList
    });
  },

  /**
   * 图片路径格式化
   */
  timetostr(time) {
    var randnum = Math.floor(Math.random() * (9999 - 1000)) + 1000;
    var str = file_path + randnum + "_" + time.getMilliseconds() + ".png";
    return str;
  },

  uploadToCloud() {
    const {
      fileList: fileList = []
    } = this.data;
    if (!fileList.length) {
      wx.showToast({
        title: '请选择图片',
        icon: 'none'
      });
    } else {
      const uploadTasks = fileList.map((file, index) =>
        this.uploadFilePromise(that.timetostr(new Date()), file)
      );
      Promise.all(uploadTasks)
        .then(data => {
          for (var i in data) {
            that.data.images.push(data[i].fileID)
          }
          this.setData({ cloudPath: data, images: images });
        })
        .catch(e => {
          wx.showToast({
            title: '上传失败',
            icon: 'none'
          });
          console.log(e);
        });
    }
  },

  uploadFilePromise(fileName, chooseResult) {
    return wx.cloud.uploadFile({
      cloudPath: fileName,
      filePath: chooseResult.path
    });
  },
Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐