用云开发Cloudbase实现小程序多图片内容安全监测的代码详解

 
 
 
 
 
 
 发布
 

.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;
}

/*
* 涉及到的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 &＃63; 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,
 })
 }
 },
})

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

// 云函数入口文件
const cloud = require('wx-server-sdk');
cloud.init({
 env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
 const wxCOntext= cloud.getWXContext()
 try {
 const result = await cloud.openapi.security.imgSecCheck({
 media: {
 contentType: 'image/png',
 value: Buffer.from(event.img) // 这里必须要将小程序端传过来的进行Buffer转化,否则就会报错,接口异常
 }
 
 })

 if (result && result.errCode.toString() === '87014') {
 return { code: 500, msg: '内容含有违法违规内容', data: result }
 } else {
 return { code: 200, msg: '内容ok', data: result }
 }
 } catch (err) {
 // 错误处理
 if (err.errCode.toString() === '87014') {
 return { code: 500, msg: '内容含有违法违规内容', data: err }
 }
 return { code: 502, msg: '调用imgSecCheck接口异常', data: err }
 }
}

// miniprogram/pages/imgSecCheck/imgSecCheck.js
// 最大上传图片数量
const MAX_IMG_NUM = 9;

const db = wx.cloud.database()
Page({

 /**
 * 页面的初始数据
 */
 data: {
 images: [],
 selectPhoto: true, // 添加图片元素是否显示
 },

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

 },
 // 选择图片
 onChooseImage() {
 // const that = this; // 如果下面用了箭头函数,那么这行代码是不需要的,直接用this就可以了的// 还能再选几张图片,初始值设置最大的数量-当前的图片的长度
 let max = MAX_IMG_NUM - this.data.images.length; 
 wx.chooseImage({
 count: max,
 sizeType: ['original', 'compressed'],
 sourceType: ['album', 'camera'],
 success: (res) => { // 这里若不是箭头函数,那么下面的this.setData的this要换成that上面的临时变量,作用域的问题,不清楚的,可以看下this指向相关的知识
 console.log(res)
 // tempFilePath可以作为img标签的src属性显示图片
 const tempFiles = res.tempFiles;
 this.setData({
  images: this.data.images.concat(res.tempFilePaths)
 })
 // 在选择图片时,对本地临时存储的图片,这个时候,进行图片的校验,当然你放在最后点击发布时,进行校验也是可以的,只不过是一个前置校验和后置校验的问题,我个人倾向于在选择图片时就进行校验的,选择一些照片时,就应该在选择时阶段做安全判断的, 小程序端请求云函数方式// 图片转化buffer后，调用云函数
 console.log(tempFiles);
 tempFiles.forEach(items => {
  console.log(items);
  // 图片转化buffer后，调用云函数
  wx.getFileSystemManager().readFile({
  filePath: items.path,
  success: res => {
   console.log(res);
   wx.cloud.callFunction({ // 小程序端请求imgSecCheck云函数,并传递img参数进行检验
   name: 'imgSecCheck',
   data: {
   img: res.data
   }
  })
  .then(res => {
  console.log(res);
  let { errCode } = res.result.data;
  switch(errCode) {
   case 87014:
   this.setData({
   resultText: '内容含有违法违规内容'
   })
   break;
   case 0:
   this.setData({
   resultText: '内容OK'
   })
   break;
   default:
   break;
  }
 
  })
  .catch(err => {
  console.error(err);
  })
  },
  fail: err => {
  console.error(err);
  }
  })
 })
 
  
 // 还能再选几张图片
 max = MAX_IMG_NUM - this.data.images.length
 this.setData({
  selectPhoto: max <= 0 &＃63; 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,
 })
 }
 },
})

// 选择图片
 onChooseImage() {
 // 还能再选几张图片,初始值设置最大的数量-当前的图片的长度
 let max = MAX_IMG_NUM - this.data.images.length; 
 wx.chooseImage({
 count: max,
 sizeType: ['original', 'compressed'],
 sourceType: ['album', 'camera'],
 success: (res) => {
 console.log(res)
 const tempFiles = res.tempFiles;
 this.setData({
  images: this.data.images.concat(res.tempFilePaths) // tempFilePath可以作为img标签的src属性显示图片
 })
 // 在选择图片时,对本地临时存储的图片,这个时候,进行图片的校验,当然你放在最后点击发布时,进行校验也是可以的,只不过是一个前置校验和后置校验的问题,我个人倾向于在选择图片时就进行校验的,选择一些照片时,就应该在选择时阶段做安全判断的, 小程序端请求云函数方式// 图片转化buffer后，调用云函数
 console.log(tempFiles);
 tempFiles.forEach(items => {
  if (items && items.size > 1 * (1024 * 1024)) { // 限制图片的大小
  wx.showToast({
  icon: 'none',
  title: '上传的图片超过1M,禁止用户上传',
  duration: 4000
  })
  // 超过1M的图片,禁止用户上传
  }
  console.log(items);
  // 图片转化buffer后，调用云函数
  wx.getFileSystemManager().readFile({
  filePath: items.path,
  success: res => {
   console.log(res);
   wx.cloud.callFunction({ // 请求调用云函数imgSecCheck
   name: 'imgSecCheck',
   data: {
   img: res.data
   }
  })
  .then(res => {
  console.log(res);
  let { errCode } = res.result.data;
  switch(errCode) {
   case 87014:
   this.setData({
   resultText: '内容含有违法违规内容'
   })
   break;
   case 0:
   this.setData({
   resultText: '内容OK'
   })
   break;
   default:
   break;
  }
  })
  .catch(err => {
  console.error(err);
  })
  },
  fail: err => {
  console.error(err);
  }
  })
 })
 
 // 还能再选几张图片
 max = MAX_IMG_NUM - this.data.images.length
 this.setData({
  selectPhoto: max <= 0 &＃63; false : true // 当超过9张时,加号隐藏
 })
 },
 })
 },

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

// miniprogram/pages/imgSecCheck/imgSecCheck.js
// 最大上传图片数量
const MAX_IMG_NUM = 9;
const db = wx.cloud.database()
Page({

 /**
 * 页面的初始数据
 */
 data: {
 images: [],
 selectPhoto: true, // 添加图片元素是否显示
 },

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

 },

 // 选择图片
 onChooseImage() {
 // 还能再选几张图片,初始值设置最大的数量-当前的图片的长度
 let max = MAX_IMG_NUM - this.data.images.length;
 wx.chooseImage({
 count: max,
 sizeType: ['original', 'compressed'],
 sourceType: ['album', 'camera'],
 success: (res) => {
 console.log(res)
 const tempFiles = res.tempFiles;
 this.setData({
  images: this.data.images.concat(res.tempFilePaths) // tempFilePath可以作为img标签的src属性显示图片
 })
 // 在选择图片时,对本地临时存储的图片,这个时候,进行图片的校验,当然你放在最后点击发布时,进行校验也是可以的,只不过是一个前置校验和后置校验的问题,我个人倾向于在选择图片时就进行校验的,选择一些照片时,就应该在选择时阶段做安全判断的, 小程序端请求云函数方式
 // 图片转化buffer后，调用云函数
 console.log(tempFiles);
 tempFiles.forEach(items => {
  if (items && items.size > 1 * (1024 * 1024)) {
  wx.showToast({
  icon: 'none',
  title: '上传的图片超过1M,禁止用户上传',
  duration: 4000
  })
  // 超过1M的图片,禁止上传
  }
  console.log(items);
  // 图片转化buffer后，调用云函数
  wx.getFileSystemManager().readFile({
  filePath: items.path,
  success: res => {
  console.log(res);
  this._checkImgSafe(res.data); // 检测图片安全校验
  },
  fail: err => {
  console.error(err);
  }
  })
 })


 // 还能再选几张图片
 max = MAX_IMG_NUM - this.data.images.length
 this.setData({
  selectPhoto: max <= 0 &＃63; 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,
 })
 }
 },

 // 点击发布按钮,将图片上传到云数据库当中
 send() {
 const images = this.data.images.length;
 if (images) {
 this._showToastTip();
 let promiseArr = []
 let fileIds = []
 let imgLength = this.data.images.length;
 // 图片上传
 for (let i = 0; i  {
  let item = this.data.images[i]
  // 文件扩展名
  let suffix = /\.\w+$/.exec(item)[0]; // 取文件后拓展名
  wx.cloud.uploadFile({ // 上传图片至云存储,循环遍历,一张张的上传
  cloudPath: 'blog/' + Date.now() + '-' + Math.random() * 1000000 + suffix,
  filePath: item,
  success: (res) => {
  console.log(res);
  console.log(res.fileID)
  fileIds = fileIds.concat(res.fileID)
  resolve()

  },
  fail: (err) => {
  console.error(err)
  reject()
  }
  })
 })
 promiseArr.push(p)
 }
 // 存入到云数据库
 Promise.all(promiseArr).then((res) => {
  db.collection('blog').add({ // 查找blog集合,将数据添加到这个集合当中
  data: {
  img: fileIds,
  createTime: db.serverDate(), // 服务端的时间
  }
  }).then((res) => {
  console.log(res);
  this._hideToastTip();
  this._successTip();
  })
 })
 .catch((err) => {
  // 发布失败
  console.error(err);
 })
 } else {
 wx.showToast({
 icon: 'none',
 title: '没有选择任何图片,发布不了',
 })
 }

 },

 // 校验图片的安全
 _checkImgSafe(data) {
 wx.cloud.callFunction({
 name: 'imgSecCheck',
 data: {
  img: data
 }
 })
 .then(res => {
 console.log(res);
 let {
  errCode
 } = res.result.data;
 switch (errCode) {
  case 87014:
  this.setData({
  resultText: '内容含有违法违规内容'
  })
  break;
  case 0:
  this.setData({
  resultText: '内容OK'
  })
  break;
  default:
  break;
 }
 })
 .catch(err => {
 console.error(err);
 })
 },

 _showToastTip() {
 wx.showToast({
 icon: 'none',
 title: '发布中...',
 })
 },

 _hideToastTip() {
 wx.hideLoading();
 },

 _successTip() {
 wx.showToast({
 icon: 'none',
 title: '发布成功',
 })
 },
})

 
 





 发布


 检测结果显示: {{ resultText }}