小程序-云開發(fā)-多圖片的內(nèi)容安全檢測及上傳遇到的問題.png
前言
相比于文本的安全檢測,圖片的安全檢測要稍微略復(fù)雜一些,當(dāng)您讀完本篇,將get到
- 圖片安全檢測的應(yīng)用場景
- 解決圖片的安全方式
- 使用云開發(fā)中云調(diào)用方式對圖片進(jìn)行檢測
- 如何對上傳圖片大小進(jìn)行限制
- 如何解決多圖上傳覆蓋問題
如有收獲,不忘三連擊(給贊,留言,分享~)
先看一下完成的示例效果
當(dāng)用戶上傳敏感違規(guī)圖片時,禁止用戶上傳發(fā)布,并且做出相對應(yīng)的用戶友好提示
01-敏感圖片.gif
完成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">發(fā)布</button>
</view>
對應(yīng)的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;
}
最終呈現(xiàn)的UI,如下所示
UI布局.png
對應(yīng)的JS代碼
/*
* 涉及到的API:wx.chooseImage 從本地相冊選擇圖片或使用相機(jī)拍照
*(https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html)
*
*
*/
// 最大上傳圖片數(shù)量
const MAX_IMG_NUM = 9;
const db = wx.cloud.database(); // 初始化云數(shù)據(jù)庫
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
images: [], // 把上傳的圖片存放在一個數(shù)組對象里面
selectPhoto: true, // 添加+icon元素是否顯示
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
// 選擇圖片
onChooseImage() {
// 還能再選幾張圖片,初始值設(shè)置最大的數(shù)量-當(dāng)前的圖片的長度
let max = MAX_IMG_NUM - this.data.images.length;
wx.chooseImage({
count: max, // count表示最多可以選擇的圖片張數(shù)
sizeType: ['original', 'compressed'], // 所選的圖片的尺寸
sourceType: ['album', 'camera'], // 選擇圖片的來源
success: (res) => { // 接口調(diào)用成功的回調(diào)函數(shù)
console.log(res)
this.setData({ // tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片,下面是將后添加的圖片與之前的圖片給追加起來
images: this.data.images.concat(res.tempFilePaths)
})
// 還能再選幾張圖片
max = MAX_IMG_NUM - this.data.images.length
this.setData({
selectPhoto: max <= 0 ? false : true // 當(dāng)超過9張時,加號隱藏
})
},
})
},
// 點擊右上方刪除圖標(biāo),刪除圖片操作
onDelImage(event) {
const index = event.target.dataset.index;
// 點擊刪除當(dāng)前圖片,用splice方法,刪除一張,從數(shù)組中移除一個
this.data.images.splice(index, 1)
this.setData({
images: this.data.images
})
// 當(dāng)添加的圖片達(dá)到設(shè)置最大的數(shù)量時,添加按鈕隱藏,不讓新添加圖片
if (this.data.images.length == MAX_IMG_NUM - 1) {
this.setData({
selectPhoto: true,
})
}
},
})
最終實現(xiàn)的前端UI效果如下所是:
02-前端上傳圖片操作.gif
現(xiàn)在看到的效果,沒有任何云函數(shù)代碼,只是前端的靜態(tài),對于一些涉嫌敏感圖片,是有必要進(jìn)行做過濾處理的
應(yīng)用場景
通常,在校驗一張圖片是否含有違法違規(guī)內(nèi)容相比于文本安全的校驗,同樣重要,有如下應(yīng)用
- 圖片智能鑒黃：涉及拍照的工具類應(yīng)用(如美拍，識圖類應(yīng)用)用戶拍照上傳檢測；電商類商品上架圖片檢測；媒體類用戶文章里的圖片檢測等
- 敏感人臉識別：用戶頭像；媒體類用戶文章里的圖片檢測；社交類用戶上傳的圖片檢測等,凡是有用戶自發(fā)生產(chǎn)內(nèi)容的都應(yīng)當(dāng)提前做檢測
解決圖片的安全手段
在小程序開發(fā)中,提供了兩種方式
- HTTPS調(diào)用
- 云調(diào)用
HTTPS 調(diào)用的請求接口地止
https://api.weixin.qq.com/wxa/img_sec_check?access_token=ACCESS_TOKEN
檢測圖片審核,根據(jù)官方文檔得知,需要兩個必傳的參數(shù):分別是:access_token(接口調(diào)用憑證),media(要檢測的圖片文件)
對于HTTPS調(diào)用方式,愿意折騰的小伙伴可以參考文本內(nèi)容安全檢測(上篇)的處理方式,處理大同小異,本篇主要以云開發(fā)的云調(diào)用為主
云調(diào)用方式
在cloudfunctions目錄文件夾下創(chuàng)建云函數(shù)imgSecCheck
image
并在該目錄下創(chuàng)建
config.json,配置參數(shù)如下所示
{
"permissions": {
"openapi": [
"security.imgSecCheck"
]
}
}
配置完后,在主入口index.js中,如下所示,通過security.imgSecCheck接口,并傳入media對象
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk');
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函數(shù)入口函數(shù)
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) // 這里必須要將小程序端傳過來的進(jìn)行Buffer轉(zhuǎn)化,否則就會報錯,接口異常
}
})
if (result && result.errCode.toString() === '87014') {
return { code: 500, msg: '內(nèi)容含有違法違規(guī)內(nèi)容', data: result }
} else {
return { code: 200, msg: '內(nèi)容ok', data: result }
}
} catch (err) {
// 錯誤處理
if (err.errCode.toString() === '87014') {
return { code: 500, msg: '內(nèi)容含有違法違規(guī)內(nèi)容', data: err }
}
return { code: 502, msg: '調(diào)用imgSecCheck接口異常', data: err }
}
}
你會發(fā)現(xiàn)在云函數(shù)端,就這么幾行代碼,就完成了圖片安全校驗
而在小程序端,代碼如下所示
// miniprogram/pages/imgSecCheck/imgSecCheck.js
// 最大上傳圖片數(shù)量
const MAX_IMG_NUM = 9;
const db = wx.cloud.database()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
images: [],
selectPhoto: true, // 添加圖片元素是否顯示
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
// 選擇圖片
onChooseImage() {
// const that = this; // 如果下面用了箭頭函數(shù),那么這行代碼是不需要的,直接用this就可以了的
// 還能再選幾張圖片,初始值設(shè)置最大的數(shù)量-當(dāng)前的圖片的長度
let max = MAX_IMG_NUM - this.data.images.length;
wx.chooseImage({
count: max,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => { // 這里若不是箭頭函數(shù),那么下面的this.setData的this要換成that上面的臨時變量,作用域的問題,不清楚的,可以看下this指向相關(guān)的知識
console.log(res)
// tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
const tempFiles = res.tempFiles;
this.setData({
images: this.data.images.concat(res.tempFilePaths)
})
// 在選擇圖片時,對本地臨時存儲的圖片,這個時候,進(jìn)行圖片的校驗,當(dāng)然你放在最后點擊發(fā)布時,進(jìn)行校驗也是可以的,只不過是一個前置校驗和后置校驗的問題,我個人傾向于在選擇圖片時就進(jìn)行校驗的,選擇一些照片時,就應(yīng)該在選擇時階段做安全判斷的, 小程序端請求云函數(shù)方式
// 圖片轉(zhuǎn)化buffer后，調(diào)用云函數(shù)
console.log(tempFiles);
tempFiles.forEach(items => {
console.log(items);
// 圖片轉(zhuǎn)化buffer后，調(diào)用云函數(shù)
wx.getFileSystemManager().readFile({
filePath: items.path,
success: res => {
console.log(res);
wx.cloud.callFunction({
name: 'imgSecCheck',
data: {
img: res.data
}
})
.then(res => {
console.log(res);
let { errCode } = res.result.data;
switch(errCode) {
case 87014:
this.setData({
resultText: '內(nèi)容含有違法違規(guī)內(nèi)容'
})
break;
case 0:
this.setData({
resultText: '內(nèi)容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 ? false : true // 當(dāng)超過9張時,加號隱藏
})
},
})
},
// 刪除圖片
onDelImage(event) {
const index = event.target.dataset.index;
// 點擊刪除當(dāng)前圖片,用splice方法,刪除一張,從數(shù)組中移除一個
this.data.images.splice(index, 1);
this.setData({
images: this.data.images
})
// 當(dāng)添加的圖片達(dá)到設(shè)置最大的數(shù)量時,添加按鈕隱藏,不讓新添加圖片
if (this.data.images.length == MAX_IMG_NUM - 1) {
this.setData({
selectPhoto: true,
})
}
},
})
示例效果如下所示:
03-圖片安全檢測結(jié)果顯示.gif
至此,關(guān)于圖片安全檢測就已經(jīng)完成了,您只需要根據(jù)檢測的結(jié)果,做一些友好的用戶提示,或者做一些自己的業(yè)務(wù)邏輯判斷即可
如何對上傳的圖片大小進(jìn)行限制
有時候,您需要對用戶上傳圖片的大小進(jìn)行限制,限制用戶任意上傳超大圖片,那怎么處理呢,在微信小程序里面,主要借助的是wx.chooseImage這個接口成功返回后臨時路徑的res.tempFiles中的size大小判斷即可進(jìn)行處理
限制圖片的大小.png
具體實例代碼如下所示
// 選擇圖片
onChooseImage() {
const that = this;
// 還能再選幾張圖片,初始值設(shè)置最大的數(shù)量-當(dāng)前的圖片的長度
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標(biāo)簽的src屬性顯示圖片
})
// 在選擇圖片時,對本地臨時存儲的圖片,這個時候,進(jìn)行圖片的校驗,當(dāng)然你放在最后點擊發(fā)布時,進(jìn)行校驗也是可以的,只不過是一個前置校驗和后置校驗的問題,我個人傾向于在選擇圖片時就進(jìn)行校驗的,選擇一些照片時,就應(yīng)該在選擇時階段做安全判斷的, 小程序端請求云函數(shù)方式
// 圖片轉(zhuǎn)化buffer后，調(diào)用云函數(shù)
console.log(tempFiles);
tempFiles.forEach(items => {
if (items && items.size > 1 * (1024 * 1024)) { // 限制圖片的大小
wx.showToast({
icon: 'none',
title: '上傳的圖片超過1M,禁止用戶上傳',
duration: 4000
})
}
console.log(items);
// 圖片轉(zhuǎn)化buffer后，調(diào)用云函數(shù)
wx.getFileSystemManager().readFile({
filePath: items.path,
success: res => {
console.log(res);
wx.cloud.callFunction({ // 請求調(diào)用云函數(shù)imgSecCheck
name: 'imgSecCheck',
data: {
img: res.data
}
})
.then(res => {
console.log(res);
let { errCode } = res.result.data;
switch(errCode) {
case 87014:
this.setData({
resultText: '內(nèi)容含有違法違規(guī)內(nèi)容'
})
break;
case 0:
this.setData({
resultText: '內(nèi)容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 ? false : true // 當(dāng)超過9張時,加號隱藏
})
},
})
},
圖片超過一定的大小進(jìn)行限制.gif
注意: 使用微信官方的圖片內(nèi)容安全接口進(jìn)行校驗,限制圖片大小限制:1M,否則的話就會報錯
圖片超過1M的大小.png
也就是說,對于超過1M大小的違規(guī)圖片,微信官方提供的這個圖片安全接口是無法進(jìn)行校驗的
這個根據(jù)自己的業(yè)務(wù)而定,在小程序端對用戶上傳圖片的大小進(jìn)行限制
如果您覺得微信官方提供的圖片安全接口滿足不了自己的業(yè)務(wù)需求,那么可以選擇一些其他的圖片內(nèi)容安全校驗的接口的
這個圖片安全校驗是非常有必要的,用戶一旦上傳非法圖片,一旦通過網(wǎng)絡(luò)進(jìn)行傳播,產(chǎn)生了社會影響,平臺是有責(zé)任的,這種前車之鑒是有的
如何解決多圖上傳覆蓋的問題
對于檢測通過的圖片,我們往往需要將它存儲到云數(shù)據(jù)庫當(dāng)中(當(dāng)然你可以將用戶的唯一標(biāo)識openid,昵稱,頭像,時間等一并上傳到云數(shù)據(jù)庫當(dāng)中去的),以便于在其他地方使用,那這個在小程序云開發(fā)中是怎么實現(xiàn)的呢?
我們需要將本地選擇的圖片fileID,存儲到云數(shù)據(jù)庫集合當(dāng)中
在小程序當(dāng)中,上傳圖片至云存儲使用的API是wx.cloud.uploadFile,將本地資源上傳至云存儲空間
注意: 如果上傳至同一路徑則會被覆蓋
對于上傳圖片來說,這個wx.cloud.uploadFileAPI接口只能上傳一張圖片,但是很多時候,是需要上傳多張圖片到云存儲當(dāng)中的,當(dāng)點擊發(fā)布的時候,我們是希望將多張圖片都上傳到云存儲當(dāng)中去的
這個API雖然只能每次上傳一張,但您可以循環(huán)遍歷多張圖片,然后一張一張的上傳的
在cloudPath上傳文件的參數(shù)當(dāng)中,它的值:需要注意:文件的名稱
那如何保證上傳的圖片不被覆蓋,文件不重名的情況下就不會被覆蓋
而在選擇圖片的時候,不應(yīng)該上傳,因為用戶可能有刪除等操作,如果直接上傳的話會造成資源的浪費
而應(yīng)該在點發(fā)布按鈕的時候,才執(zhí)行上傳操作,文件不重名覆蓋的示例代碼如下所示
let promiseArr = []
let fileIds = [] // 將圖片的fileId存放到一個數(shù)組中
let imgLength = this.data.images.length;
// 圖片上傳
for (let i = 0; i < imgLength; i++) {
let p = new Promise((resolve, reject) => {
let item = this.data.images[i]
// 文件擴(kuò)展名
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)
}
// 存入到云數(shù)據(jù)庫,其中這個Promise.all(),等待里面所有的任務(wù)都執(zhí)行之后,在去執(zhí)行后面的任務(wù),也就是等待上傳所有的圖片上傳完后,才能把相對應(yīng)的數(shù)據(jù)存到數(shù)據(jù)庫當(dāng)中
Promise.all(promiseArr).then((res) => {
db.collection('blog').add({ // 查找blog集合,將數(shù)據(jù)添加到這個集合當(dāng)中
data: {
img: fileIds,
createTime: db.serverDate(), // 服務(wù)端的時間
}
}).then((res) => {
console.log(res);
this._hideToastTip();
this._successTip();
})
})
.catch((err) => {
// 發(fā)布失敗
console.error(err);
})
上面通過利用當(dāng)前時間+隨機(jī)數(shù)的方式進(jìn)行了一個區(qū)分,規(guī)避了上傳文件同名的問題
因為這個上傳接口,一次性只能上傳一張圖片,所以需要循環(huán)遍歷圖片,然后一張張的上傳,一個是上傳到云存儲中
另一個是添加到云數(shù)據(jù)庫集合當(dāng)中,要分別注意下這兩個操作,云數(shù)據(jù)庫中的圖片是從云存儲中拿到的,然后再添加到云數(shù)據(jù)庫當(dāng)中去的
示例效果如下所示:
發(fā)布圖片.gif
上傳至云存儲的fileId.png
將上傳的圖片存儲到云數(shù)據(jù)庫中
注意:需要手動創(chuàng)建集合,不然是無法上傳不到云數(shù)據(jù)庫當(dāng)中的,會報錯,示例中的數(shù)據(jù)集合是blog
存儲數(shù)據(jù)集合到云數(shù)據(jù)庫中.png
至此,關(guān)于敏感圖片的檢測,以及多圖片的上傳到這里就已經(jīng)完成了
如下是完整的小程序端邏輯示例代碼
// miniprogram/pages/imgSecCheck/imgSecCheck.js
// 最大上傳圖片數(shù)量
const MAX_IMG_NUM = 9;
const db = wx.cloud.database()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
images: [],
selectPhoto: true, // 添加圖片元素是否顯示
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
// 選擇圖片
onChooseImage() {
const that = this;
// 還能再選幾張圖片,初始值設(shè)置最大的數(shù)量-當(dāng)前的圖片的長度
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標(biāo)簽的src屬性顯示圖片
})
// 在選擇圖片時,對本地臨時存儲的圖片,這個時候,進(jìn)行圖片的校驗,當(dāng)然你放在最后點擊發(fā)布時,進(jìn)行校驗也是可以的,只不過是一個前置校驗和后置校驗的問題,我個人傾向于在選擇圖片時就進(jìn)行校驗的,選擇一些照片時,就應(yīng)該在選擇時階段做安全判斷的, 小程序端請求云函數(shù)方式
// 圖片轉(zhuǎn)化buffer后，調(diào)用云函數(shù)
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);
// 圖片轉(zhuǎn)化buffer后，調(diào)用云函數(shù)
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 ? false : true // 當(dāng)超過9張時,加號隱藏
})
},
})
},
// 刪除圖片
onDelImage(event) {
const index = event.target.dataset.index;
// 點擊刪除當(dāng)前圖片,用splice方法,刪除一張,從數(shù)組中移除一個
this.data.images.splice(index, 1);
this.setData({
images: this.data.images
})
// 當(dāng)添加的圖片達(dá)到設(shè)置最大的數(shù)量時,添加按鈕隱藏,不讓新添加圖片
if (this.data.images.length == MAX_IMG_NUM - 1) {
this.setData({
selectPhoto: true,
})
}
},
// 點擊發(fā)布按鈕,將圖片上傳到云數(shù)據(jù)庫當(dāng)中
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 < imgLength; i++) {
let p = new Promise((resolve, reject) => {
let item = this.data.images[i]
// 文件擴(kuò)展名
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)
}
// 存入到云數(shù)據(jù)庫
Promise.all(promiseArr).then((res) => {
db.collection('blog').add({ // 查找blog集合,將數(shù)據(jù)添加到這個集合當(dāng)中
data: {
img: fileIds,
createTime: db.serverDate(), // 服務(wù)端的時間
}
}).then((res) => {
console.log(res);
this._hideToastTip();
this._successTip();
})
})
.catch((err) => {
// 發(fā)布失敗
console.error(err);
})
} else {
wx.showToast({
icon: 'none',
title: '沒有選擇任何圖片,發(fā)布不了',
})
}
},
// 校驗圖片的安全
_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: '內(nèi)容含有違法違規(guī)內(nèi)容'
})
break;
case 0:
this.setData({
resultText: '內(nèi)容OK'
})
break;
default:
break;
}
})
.catch(err => {
console.error(err);
})
},
_showToastTip() {
wx.showToast({
icon: 'none',
title: '發(fā)布中...',
})
},
_hideToastTip() {
wx.hideLoading();
},
_successTip() {
wx.showToast({
icon: 'none',
title: '發(fā)布成功',
})
},
})
完整的示例wxml,如下所示
<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">發(fā)布</button>
</view>
<view>
檢測結(jié)果顯示: {{ resultText }}
</view>
您可以根據(jù)自己的業(yè)務(wù)邏輯需要,一旦檢測到圖片違規(guī)時,禁用按鈕狀態(tài),或者給一些用戶提示,都是可以的,在發(fā)布之前或者點擊發(fā)布時,進(jìn)行圖片內(nèi)容安全的校驗都可以,一旦發(fā)現(xiàn)圖片有違規(guī)時,就不讓繼續(xù)后面的操作的
結(jié)語
本文主要通過借助官方提供的圖片security.imgSecCheck
接口,實現(xiàn)了對圖片安全的校驗,實現(xiàn)起來,是相當(dāng)?shù)姆奖愕?對于基礎(chǔ)性的校驗,利用官方提供的接口,已經(jīng)夠用了的,但是如果想要更加嚴(yán)格的檢測,可以引入一些第三方的內(nèi)容安全強強校驗,確保內(nèi)容更加安全
實現(xiàn)了如何對上傳的圖片大小進(jìn)行限制,以及解決同名圖片上傳覆蓋的問題
如果小伙伴們?nèi)匀粚D片或者文本內(nèi)容安全檢測有問題,都可以在下方留言,一起探討
