vantui上传图片

1.前台程序：

<template>

    <div>

        <van-uploader :after-read="afterRead" upload-text="疫苗接种图片" />

        <br />

        {{ info }}

    </div>

</template>

<script>

import axios from 'axios'

import { Toast } from 'vant';

import { ref } from 'vue'

export default {

    setup() {

        let info = ref("")

        const afterRead = (file) => {

            // 此时可以自行将文件上传至服务器

            // let photos = []

            // that.fileList.forEach(v => {

            //     let o = {

            //         base64Str: v.content,

            //         filename: v.file.name

            //     }

            //     photos.push(o)

            // })

            // axios.request({

            //     url: '/x/xxx/api',

            //     data: {

            //         photos: photos

            //     },

            //     method: 'POST'

            // })

            // this.axios.post(this.$config.uploadImg,forms ,configs).then(res=>{

            //  console.log(res)

            // })

            let forms = new FormData()

            forms.append("file", file.file)

            let newAxios = axios.create({

                headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' }

            })

            newAxios.defaults.transformRequest = [function (data, config) {

                switch (config['Content-Type'].toLowerCase()) {

                    case 'multipart/form-data;charset=utf-8': {

                        return data

                    }

                }

            }]

            // axios.post('http://127.0.0.1:8080/te/submit', forms, configs).then(res => {

            //     console.log(res)

            // }).catch((err) => { console.log(err) })

            newAxios({

                url: "api/te/submit",

                method: "post",

                data: forms,

                headers: { 'Content-Type': 'multipart/form-data;charset=utf-8' }

            }).then((res) => {

                info.value = res.data

                console.log(info.value)

            }).catch((err) => {

                console.log(err)

            })

 

            // console.log(file.raw);

        };

        // 返回布尔值

        const beforeRead = (file) => {

            if (file.type !== 'image/jpeg') {

                Toast('请上传 jpg 格式图片');

                return false;

            } else {

                Toast("hello world")

            }

            return true;

        };

        return {

            afterRead,

            beforeRead,

            info

        };

    },

};

</script>

<style>

</style>

2.后台springboot

 @PostMapping(value = "/submit", consumes = { "multipart/form-data;charset=utf-8" })
    public String upload(@RequestParam("file") MultipartFile file)  {

        try {
            String uuid = UUIDUtil.getUUID();
            String oldName= file.getOriginalFilename();
            int i = oldName.lastIndexOf(".");
            String suffix = oldName.substring(i);
            System.out.println("suffix: " + suffix);

            file.transferTo(new File("I:\\"+uuid+suffix));

            // 进行文字识别
            String result = recognize("I:\\"+uuid+suffix).replace(" ","");
            String msg="";
            String[] strings = result.split("\n");
            for (String str:strings) {
//                System.out.println(str);
                if(str.contains("姓名")){
                    System.out.println(str.replace("姓名",""));
                    msg=msg+str.replace("姓名","");
                }else if(str.contains("新冠疫苗第")){
                    System.out.println(str.replace("新冠疫苗第",""));
                    msg=msg+str.replace("姓名","");
                }else if(str.contains("身") && str.contains("号")){
                    System.out.println(str);
                }else if(str.contains("已完成")){
                    System.out.println(str);
                }
            }

            return msg;
        } catch (IOException e) {
            System.out.println("上传失败");
            e.printStackTrace();
        }
        System.out.println("上传完成");
        return "";
    }

    private String recognize(String path) {
//        String path = "C:\\Users\\Tang\\Desktop\\图片\\其他图片2.png";

        // 语言库位置（修改为跟自己语言库文件夹的路径）
        String lagnguagePath = "D:\\tessdata";

        File file = new File(path);
        ITesseract instance = new Tesseract();

        //设置训练库的位置
        instance.setDatapath(lagnguagePath);

        //chi_sim ：简体中文， eng    根据需求选择语言库
        instance.setLanguage("chi_sim");
        String result = null;
        try {
            long startTime = System.currentTimeMillis();
            result =  instance.doOCR(file);
            long endTime = System.currentTimeMillis();
            System.out.println("Time is：" + (endTime - startTime) + " 毫秒");
        } catch (TesseractException e) {
            e.printStackTrace();
        }

//        System.out.println("result: ");
//        System.out.println(result);
        return  result;
    }

3.maven 

<dependency>
    <groupId>net.sourceforge.tess4j</groupId>
    <artifactId>tess4j</artifactId>
    <version>4.5.2</version>
</dependency>

4.语言包下载

mirrors / tesseract-ocr / tessdata · GitCodeTrained models with support for legacy and LSTM OCR engine 🚀 Github 镜像仓库 🚀 源项目地址 https://gitcode.net/mirrors/tesseract-ocr/tessdata?utm_source=csdn_github_accelerator