作者：小石头 今天来教大家部署一个属于自己的第一个静态网站，因为这里借助小程序云开发的静态服务器资源，所以可以轻松的实现自己网站的部署，部署完以后可以在电脑浏览器，手机浏览器，微信公众号里面展示。 老规矩，先看效果图 简单起见，我这里写一个最简单的html静态网页 [图片] 然后把这个网页部署到云开发静态网站上 微信上访问效果如下 [图片] 手机浏览器上访问如下 [图片] 这也就意味着，我们的网站可以供用户在任何地方访问。下面就来教大家如何快速的部署一个属于自己的网站。 一，开通云开发 这里云开发开通开通云开发我们借助小程序开发者工具来实现快速开通。 1-1，注册小程序 这里我就不再多说了，只有注册过小程序的appid才可以开通云开发 [图片] 我们注册好小程序后，就可以拿到appid了，如上图 1-2，创建一个小程序项目 小程序项目的创建，我这里不再多说，我前面小程序基础课里有讲过很多遍。《小程序基础学习》 [图片] 这里强调一点，就是创建小程序项目时一定要用我们自己的appid不要用测试号。 [图片]在这里插入图片描述 如果你一开始是用测试appid创建的，也可以通过上图的方式更换成自己的小程序的appid。 1-3，开通云开发 这里是云开发开通，我就不做过多讲解了，我云开发课程里也讲过很多遍。大家可以去翻看下 [图片] 只需要点击开发者工具里的云开发按钮，跟着提示一步步操作就可以快速开通云开发。 二，开通静态网站功能 [图片] 我们上面云开发开通好以后，就可以在这里快速开通静态网站了。 [图片] 点击以后，直接点击开通即可 [图片] 这时候开通有个条件 [图片] 我们必须按照要求改变自己小程序的付费方式，把我们的付费方式改成按量付费即可。 [图片] [图片] [图片] 这个时候我们的静态网站功能就开通成功了。 [图片] 开通成功以后如下图。 [图片] 这个时候我们就可以把我们开发好的静态网页上传到网站供别人访问了。 三，部署网站 我们的静态html如下 [图片] 点击上传文件，把我们的index.html文件上传到静态网站 [图片] 这样就代表上传成功了。 访问我们的网站 上面把网页部署成功以后，我们就可以通过云开发为我们创建的默认网址来访问了。 [图片] 点击上图所示的详情，就可以拿到访问我们网站的网址如下 [图片] 上图箭头所示的网址，就是我们网页的访问网址。 [图片] 如果你的html是以index命名的，我们使用云开发为我们分配的域名，就可以直接访问我们的网站。 [图片] study-gas4x-1258760189.tcloudbaseapp.com 就是云开发为我分配的网站域名，以后用户就可以直接通过这个域名访问我们的网站了。 其实到这里我们就可以成功的部署属于我们自己的网站了，无非就是你网页写的比石头哥再好看些。 但是有些同学觉得官方给分配的域名太长，不好记，想使用自己的域名。那么我们该如何配置自己的域名呢？ 四，配置域名（选看） 其实前面3步就可以成功的部署自己的网站了，如果你有自己的域名，并且也成功的备案了，再来跟着石头哥学习这一节。如果没有自己的域名，那么你就要先去注册自己的域名，并备案了。所以这一节作为一个选学。 4-1，在网站配置里添加自己的域名 [图片] 如我在这里点击添加域名，然后添加自己的备案域名。 [图片] 但是我们这里要想https来安全访问，就必须配置自己的ssl证书。 [图片] 点完以后，我们这里可以直接申请免费证书。免费证书有效期1年，1年后我们再重新申请新的证书就可以了，所以这里免费的就够用了。 [图片] 如实的填写自己的备案域名和其余信息。 [图片] 提交完资料，我们这里需要验证下自己的域名，验证方式选择DNS就可以 [图片] 点位DNS验证，我们就需要给我们的域名配置访问的解析值了（这里的知识点比较深奥，大家需要自己课下恶补下域名解析的相关知识点）如果不想学习，直接根据提示配置也行。 [图片] 配置好以后，就可以点击验证先进行验证了 [图片] 验证通过后，可以看到如下 [图片] 云开发控制台也会显示部署中，我们耐心等待部署就可以了。 [图片] 启动成功会有如下标识 [图片] 虽然已经启动成功，我们如果想通过自己的域名访问自己的云开发静态网站，还需要配置下CNAME进行重定向，也就是访问我们域名的时候我们要重定向到云开发给我们分配的域名。 [图片] 这里理解起来有点晦涩，官方给的文档也是没有讲明白，我也是试了很多遍才知道是这样配置的。这里都配置好以后，我们就可以直接通过自己的域名访问网站了。 [图片] 大家也可以去访问下石头哥的云开发静态网站试一试。 到这里我们的网站部署就讲完了，后面我会用vue写一些炫酷的网站，然后部署到线上供大家观赏。 产品介绍 云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为开发者提供高可用、自动弹性扩缩的后端云服务，包含计算、存储、托管等serverless化能力，可用于云端一体化开发多种端应用（小程序，公众号，Web 应用，Flutter 客户端等），帮助开发者统一构建和管理后端服务和云资源，避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。 开通云开发：https://console.cloud.tencent.com/tcb?tdl_anchor=techsite 产品文档：https://cloud.tencent.com/product/tcb?from=12763 技术文档：https://cloudbase.net?from=10004 技术交流加Q群：601134960 最新资讯关注微信公众号【腾讯云云开发】

写在前面： 大家不要将ICP证和ICP备案搞混了。 ICP证指的是【电信增值业务经营许可证】，这个资质需要企业主体至少100万注金，去工信部办理，比较难办理；社交-交友需要ICP证。 而ICP备案，【非经营性互联网信息服务备案核准】仅仅是指企业主体的域名备案，可以简单的按以下步骤免费办理成功，其他社交类目如社区、论坛、笔记等，只需要ICP备案即可。 1､在腾讯云注册一个账号并认证企业主体（不吹不黑，开发小程序当然首选腾讯云，好用）。http://www.qcloud.com/ 如果你是个人主体，就不要往下看了，没必要折腾了。 2､找到腾讯云免费活动页：https://cloud.tencent.com/act/free?from=10107 3､选择一款云服务器，180天免费试用。 云服务器申请成功后，它的使命就完成了，没用了，让它自生自灭吧。 在整个备案过程中，也不需要部署网站（域名都没有备案，哪来的网站？）。 [图片] 云服务器180天到期后，可以自己决定是否续费，每个月也才99元，促销期甚至更低，完全可以接受吧。 备案成功后，该服务器就没什么作用了，让它180天后自然欠费销毁得了。 服务器销毁后会有什么影响？答：没有任何影响。 但是。。。。。 你备案的域名最后还得指向一个网站，因为腾讯云会应工信部的要求定期检查网站是否合规，所以你还是要建一个简单的网站，（备案期间，可以暂时不管网站的事，等将来需要的时候再管理）。 至于有多简单，答，多简单都行。此时你可以在七牛、腾讯云、阿里云租点免费的对象存储空间，做个简单的网站。 4､在进行ICP备案之前，你需要在腾讯云注册你的域名地址，如果你已有域名，但不在腾讯云，建议先将要域名过户到腾讯云的账号上。 5､进入控制台，开始ICP备案，这个流程就不介绍了，因为完全一看就懂。而且现在使用备案小程序后，不需要幕布或现场拍照了，极其方便，大家跟着流程走就一点问题没有，有人脸识别和在线拍一段小视频。另外，大家可以随便作，随便填，填错或者填得不合适也不用怕，会有专门的备案客服打电话告诉你哪哪要改，还会告诉你应该怎么填才更容易通过工信部的审核，客服的态度好得发指。 仅说一点其中的几个小坑： a､人脸识别的时候，白色背景、白色背景、白色背景，笔者在人脸识别的时候，满世界找白墙，结果还被打回来重拍了3次。 b､网站用途一律写：公司官网，好通过工信部审核。 6､腾讯云提交资料到工信部审核。这是一个漫长的让人无语的等待，20-30天。笔者最近两次都是20天才过审；不要幻想会有可能提前完成审核，这是政府部门在审核，提前完成说明某政府人员的工作安排有问题，会犯错误的。 7､备案成功后，会有短信通知你，但是，你需要去工信部网站查询结果，并将结果切屏拷贝下来，因为小程序类目审核需要上传这张图片。http://beian.miit.gov.cn/publish/query/indexFirst.action [图片] 把上面这张图片保存好，小程序类目审核的时候需要上传。收到通知后，如果在这里查不到结果，也别急，据说需要24小时。 8､接下来是小程序上线审核。 因为ICP备案的小程序内容肯定涉及到社交，最后小程序上线时还要提交到工信部审核，还需要7天左右的时间，加上前面ICP备案的时间，加起来怎么也得30-40天。大家估计时间，别影响小程序上线。这7天也是政府部门在审核，不要幻想会提前。  9､计算一下时间： 腾讯云注册账号和认证：1-3天； 域名备案：腾讯云环节：1-3天； 域名备案：工信部环节：20-30天； 小程序添加服务类目：社交类目审核：1-3天； 小程序上线审核：腾讯环节：1-2天； 小程序上线审核：工信部环节：7+天； 总天数：30-40天； 10、节省时间的一些建议： 在开发小程序之前，就开始备案工作，小程序可以同时开发，相互不影响； 在开发完成之前一、两星期之内，先发布一版小程序，别管功能是不是完整，能通过审核就行，这样会有7天的等待类目审核的时间，这个时间里，小程序可以照常开发，不影响进度； 只要是社交类，基本需要有文字和图片安全检查功能，别忘了加上，别到时审核通过不了。 11、结束。 [图片]

被禁止搜索了，没有收到站内信，不知道怎么回事 小程序ID是wxbb082904f423e0f5

作者介绍 随笔川迹: 一个靠前排的90后具有情怀的技匠,路上正追逐斜杠青年的践行者,人人领读发起人。 小程序云开发工作者,致力于小程序云开发研究,持续分享传播小程序云开发过程中遇到的一些坑以及知识体系,希望能帮助更多的小程序云开发者,与开发者们一起成长。 前言相比于文本的安全检测,图片的安全检测要稍微略复杂一些,当您读完本篇,将get到 图片安全检测的应用场景解决图片的安全校验的方式使用云调用方式对图片进行检测如何对上传图片大小进行限制如何解决多图上传覆盖问题 示例效果当用户上传敏感违规图片时,禁止用户上传发布,并且做出相对应的用户友好提示： [图片] 应用场景通常,在校验一张图片是否含有违法违规内容相比于文本安全的校验,同样重要,有如下应用： 图片智能鉴黄：涉及拍照的工具类应用(如美拍，识图类应用)用户拍照上传检测；电商类商品上架图片检测；媒体类用户文章里的图片检测等。敏感人脸识别：用户头像；媒体类用户文章里的图片检测；社交类用户上传的图片检测等,凡是有用户自发生产内容的都应当提前做检测。 解决图片的安全手段在小程序开发中,提供了两种方式 HTTPS调用云调用HTTPS 调用的请求接口地址为： https://api.weixin.qq.com/wxa/img_sec_check?access_token=ACCESS_TOKEN 检测图片审核,根据官方文档得知,需要两个必传的参数:分别是:access_token(接口调用凭证),media(要检测的图片文件) 对于HTTPS调用方式,愿意折腾的小伙伴可以参考文本内容安全检测(上篇)的处理方式,处理大同小异,本篇主要以云开发的云调用为主。 功能实现：小程序端逻辑对于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,由于只是用于图片检测演示,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) }) // 还能再选几张图片 max = MAX_IMG_NUM - this.data.images.length this.setData({ selectPhoto: max <= 0 ? 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, }) } }, }) 最终实现的前端UI效果如下所示: [图片] 您现在看到的效果,没有任何云函数代码,只是前端的纯静态展示,对于一些涉嫌敏感图片,是有必要进行做过滤处理的。 功能实现：云函数侧逻辑在cloudfunctions目录文件夹下创建云函数imgSecCheck： [图片] 并在该目录下创建config.json,配置参数如下所示： { "permissions": { "openapi": [ "security.imgSecCheck" ] } } 配置完后,在主入口index.js中,如下所示,通过security.imgSecCheck接口,并传入media对象： // 云函数入口文件 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 ? 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, }) } }, }) 示例效果如下所示: [图片] 至此,关于图片安全检测就已经完成了,您只需要根据检测的结果,做一些友好的用户提示,或者做一些自己的业务逻辑判断即可。 常见问题1.如何对上传的图片大小进行限制有时候,您需要对用户上传图片的大小进行限制,限制用户任意上传超大图片,那怎么处理呢,在微信小程序里面,主要借助的是 wx.chooseImage 这个接口成功返回后临时路径的 res.tempFiles 中的 size 大小判断即可进行处理。 [图片] 具体实例代码如下所示： // 选择图片 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 ? false : true // 当超过9张时,加号隐藏 }) }, }) }, [图片] 注意: 使用微信官方的图片内容安全接口进行校验,限制图片大小限制:1M,否则的话就会报错 [图片] 也就是说,对于超过1M大小的违规图片,微信官方提供的这个图片安全接口是无法进行校验的。 这个根据自己的业务而定,小程序端对用户上传图片的大小是进行了限制的。如果您觉得微信官方提供的图片安全接口满足不了自己的业务需求,那么可以选择一些其他的图片内容安全校验接口。 图片安全校验是非常有必要的,用户一旦上传非法图片,一旦通过网络进行传播,产生了社会影响,平台将会被追究责任,我们要吸取前车之鉴带给我的教训。 2.如何解决多图上传覆盖的问题对于上传图片来说,这个wx.cloud.uploadFileAPI接口只能上传一张图片,但是很多时候,是需要上传多张图片到云存储当中的,当点击发布的时候,我们是希望将多张图片都上传到云存储当中。 这个API虽然只能每次上传一张,但您可以循环遍历多张图片,然后一张一张上传。 在cloudPath上传文件的参数当中,它的值:需要注意:文件的名称。 那如何保证上传的图片不被覆盖呢？其实文件不重名的情况下就不会被覆盖，而在选择图片的时候,不应该上传,因为用户可能有删除等操作,如果直接上传的话会造成资源的浪费，应该在点发布按钮的时候,才执行上传操作,文件不重名覆盖的示例代码如下所示： let promiseArr = [] let fileIds = [] // 将图片的fileId存放到一个数组中 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] // 文件扩展名 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 ? 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 < imgLength; i++) { let p = new Promise((resolve, reject) => { 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: '发布成功', }) }, }) 完整的示例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">发布</button> </view> <view> 检测结果显示: {{ resultText }} </view> 您可以根据自己的业务逻辑需要,一旦检测到图片违规时,禁用按钮状态,或者给一些用户提示,都是可以的；在发布之前或者点击发布时,进行图片内容安全的校验都可以,一旦发现图片有违规时,就禁止继续后面的操作。 结语本文主要通过借助官方提供的图片：security.imgSecCheck 接口,实现了对图片安全的校验,实现起来,是相当方便的,对于基础性的校验,利用官方提供的这个接口,已经够用了的,但是如果想要更加严格的检测,可以引入一些第三方的内容安全强强校验,确保内容的安全。 实现了如何对上传的图片大小进行限制,以及解决同名图片上传覆盖的问题。 如果大家对文本内容安全校验以及图片安全校验仍然有什么问题,可以在下方留言,一起探讨。