Recently, I made a small personal program, which involves uploading pictures, but failed when it was released. It basically means that we need to do a WeChat content security test to check whether a picture contains illegal content. I read the open files of WeChat.

Really confused, also baidu search some big guys practice, seems to have a report error, made a long time long time, in fact summed up is the transmission of the format is not right below I will say the correct practice and steps (my own project inside the part of the code, everyone see an idea on the line) : In general: Because the content safe interface is not allowed to be directly called in the front end, there are security issues, so the front end will transfer the image into Base64 format to the back end, and the back end will convert the image into Buffer from Base64, and then the content safe interface will be called in the back end

Step 1. (front end)

Select a picture from the album uni. ChooseImage -- to get the picture path Tempfilepaths [0], important to see the IMGSecCheck method
chooseImage(sourceType) { const _this = this; Uni. ChooseImage ({count: 1, // Default 9 SizeType: ['original', 'Compressed '], // Default 9 SizeType: ['original',' Compressed '], function(chooseRes) { try { _this.handleImg(chooseRes.tempFilePaths[0]).then((res) => { if (res.code ! = = 200) {uni. ShowModal ({content: res. Message | | 'wrong', showCancel: false }) } uni.hideLoading() }) } catch (e) { uni.hideLoading() console.error(e) } // finally{ // uni.hideLoading() // } }}); }, async handleImg(localPath) { const _this = this; Uni. ShowLoading ({title: '... ', mask: true }) const checkRes = await this.imgSecCheck(localPath) console.log('checkRes', checkRes) if (checkRes.code ! == 200) { this.segmentResTempUrl = null return checkRes } }

Step 2. (front end)

To explain why I want to convert the image to base64 in the first place, since all other methods have failed lol

Async imgsecCheck (localPath) {const base64Res = await this. getTimgBase64 (localPath) if (base64res.code) ! $request({return base64Res}) {return base64Res} $request({return base64Res}) {return base64Res} $request({return base64Res}); 'file', dataType: 'json', data: { action: 'imgSecCheck', params: { source: base64Res.result } }, }) }, async getImgBase64(localPath) { console.log('localPath', localPath) return new Promise((resolve, reject) => { uni.getFileSystemManager().readFile({ filePath: localPath, encoding: 'base64', success: res => { let datas = res.data // console.log('datas', datas) // const base64 = uni.arrayBufferToBase64(datas) resolve({ code: 200, result: datas }) }, fail: (e) => {console.error('getImgBase64 fail', e) reject({message: 'base64 conversion error '})})})},

Request. Js encapsulation

const request = async(funcParams) => { const {name,data}=funcParams; const {action,params}=data; return new Promise((resolve, reject) => { uniCloud.callFunction({ name, data, success(response) { console.log(`callFunction(${name}/${action}) response:`, response.result); switch (response.result.code) { case 200: break; Case 10002: // login token expired break; Case 10001: // user is not authorized to break; default: break; } resolve(response.result); }, fail(err) { console.error(`callFunction(${name}/${action}) error:`, err); Reject ({message:' request error '}); }})}); } export default request

So I’m done with the previous part, and I’m a little verbose, but actually I just need to look at this method called imgSecCheck

Step 3 (back end) first looks at the necessary parameters

So we’re also going to get WeChat access_token

async function getAccessToken() { let result = null const res = await uniCloud.httpclient.request( 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wxa954bf263f23a7a6&secret=f025543f4dda4a7809 Cb42d27b279f35 ', {// Here Appid and Seceret use their own real dataType: 'json' }) if (res.status === 200) { const { access_token } = res.data result = { code: 200, message: } else {result = {code: 500, message: 'Failed to get a GetAccessToken ', } } return result } async function imgSecCheck(params) { const { result } = await getAccessToken() if (result) { const {status,data} = await uniCloud.httpclient.request( `https://api.weixin.qq.com/wxa/img_sec_check?access_token=${result}`, {// Here appid and seceret use their own real dataType: 'json', files: [Buffer.from(params.source, 'base64')] }) if(status===200&&data.errcode===0){ return { code:200, }else{return {code:500, Error message: 'pictures or violations'}}}} exports. The main = async (event) = > {let params = event. The params | | {} let content = {} let res = {} switch (event.action) { case 'imgSecCheck': res = await imgSecCheck(params); break; Default: res = {code: 403, message: 'illegal access'} break; } // return data to client return res};

This is the end of the flower

I have integrated this function into a small program I wrote by myself. If you are interested, you can search for WeChat (TOTOFF) or scan the small program code to experience it (it is the image matting function that you can experience).