虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号(ID:itclanCoder)
如果不知道如何操作
点击这里,标星不迷路
━━━━━━
━━━━━━
我希望您保持空杯
一边阅读一边思考
更重要是要动手敲
如果有收获三连击
作者 | 随笔川迹
ID | suibichuanji
前言
撰文:川川
相比于文本的安全检测,图片的安全检测要稍微略复杂一些,当您读完本篇,将get到
图片安全检测的应用场景
解决图片的安全方式
使用云开发中云调用方式对图片进行检测
如何对上传图片大小进行限制
如何解决多图上传覆盖问题
如有收获,不忘三连击(给赞,留言,分享~)
· 正 · 文 · 来 · 啦 ·
01
先看一下示例效果
当用户上传敏感违规图片时,禁止用户上传发布,并且做出相对应的用户友好提示
(当上传敏感违规图片时,禁止上传)
02
完成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)
})
// 还能再选几张图片