<template> <view> <image :src="mySrc" style="width: 100%;"></image> <view class="show"> <button type="primary" @click="selectimg()">请上传户口本页面</button> </view> <view> <uni-section title="姓名" type="line"> <uni-card :is-shadow="false"> <text class="uni-body">{{personname}}</text> </uni-card> </uni-section> <uni-section title="身份证号" type="line"> <uni-card :is-shadow="false"> <text class="uni-body">6105******</text> </uni-card> </uni-section> <uni-section title="评论区" type="line" padding> <uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput> </uni-section> </view> <uni-section title="评论得分" type="line" padding> <uni-rate v-model="rateValue" @change="onChange" /> </uni-section> <view> <button type="primary">确定评论</button> </view> </view> </template> <script> export default { data() { return { mySrc: require("@/static/logo/lo3.png"), personname:"", }; }, methods: { selectimg() { uni.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album'], success: (res) => { console.log(res.tempFilePaths[0]); this.mySrc = res.tempFilePaths[0]; this.changeImgToBase64(res.tempFilePaths[0]); } }); }, changeImgToBase64(source_img) { uni.getFileSystemManager().readFile({ filePath: source_img, encoding: "base64", success: (res) => { console.log("加密之后的图片格式:" + JSON.stringify(res)); this.makeFinalResult(res.data); }, }); }, async makeFinalResult(base64) { let token = await uni.request({ url: 'https://aip.baidubce.com/oauth/2.0/token', data: { grant_type: 'client_credentials', client_id: '2kKeVk6LvdFX8knIyYUodMDr', client_secret: '9pSXGfzvv7q1Fo76WRkeyXVpZGrj8zxb', }, success: (res) => { console.log("获取token:===>" + res.data.access_token); token = res.data.access_token; }, }); uni.request({ url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/household_register?access_token=' + token, method: 'POST', data: { image: base64, }, header: { "Content-Type": "application/x-www-form-urlencoded", }, success: (res) => { console.log("最终的结果:" + JSON.stringify(res)); //this.personname = res.words_result.Name.words; }, }); }, }, }; </script> <style lang="scss"> .show { display: flex; justify-content: center; height: 100vh; align-items: center; } <style>

这是一个Vue.js组件的代码，用于上传图片并进行文字识别。代码中包含了以下主要部分：

1. 模板部分：使用了Vue.js的模板语法，定义了一个视图，包含一个图片元素、一个显示区域、一些文本和按钮等。

2. 数据部分：通过data()方法定义了组件的数据属性，包括mySrc（图片路径）和personname（姓名）等。

3. 方法部分：定义了selectimg()方法，用于选择图片并显示在页面上；changeImgToBase64()方法，将选择的图片转换为base64格式；makeFinalResult()方法，通过调用百度OCR接口进行图片识别，并将识别结果赋值给personname属性。

4. 样式部分：使用了scss语法定义了一些样式。

需要注意的是，该代码中的请求地址、密钥等可能是测试用的，实际使用时需要替换为真实的接口地址和密钥。