React+Antd上传图片

上传图片upload组件

 <UploadfileList={this.state.fileListInvoice}beforeUpload={this.beforeUploadInvoice}onChange={this.onChangeInvoice}onRemove={this.handleRemove}showUploadList={true}accept=".jpg,.pdf,.jpeg,.bmp,.png"> //允许上传图片的格式<Button><Icon type="upload" /> 上传发票</Button></Upload>

上传图片函数：

onChangeInvoice=(info)=>{   //上传文件改变时的状态this. setState({fileListInvoice:[{...info.file,status:"done"}] })}handleChangeInvoice = (info)  =>{const formData = new FormData();formData.append('file', info);   // 最新上传的文件 转换成FormData , 文件上传有关的传参 都要转换城FormDataformData.append('uName', this.state.uName);   // 最新上传的文件 转换成FormData , 文件上传有关的传参 都要转换城FormDataformData.append('type','发票')const { dispatch } = this.props;dispatch({type:'register/fetchUpload',payload: formData,}).then((res)=>{   //res图片路径let map = {photo:res,}axios.post(`${CONNECT_URL}examine/provingInvoice`,qs.stringify(map))//参数1：后端访问路径；参数2：qs将传参转化为json格式.then((response)=>{const data = response.data; //返回的信息，此案例上传的为发票，并且使用api获取到了发票的基本信息if(data.error_msg === 'target detect error'){message.error('上传图片错误')}else if(response.data.words_result.Remarks){message.success('验证成功')const startPrice = data.words_result.TotalAmount                                           //获取购买价格this.setState({startPrice:startPrice})const date = moment(data.words_result.Remarks.split('期')[1]).format('YYYY-MM-DD'); //获取购买时间this.setState({date:date})let buytime = moment(date).format("YYYY");  //购买日期年份let newdate = moment(new Date()).format("YYYY");//当前年份const i = newdate-buytime; //计算时间差值}).catch();})}beforeUploadInvoice=file=>{const isLt10M = file.size / 1024 /1024 < 10;if (!isLt10M) {message.error('Image must smaller than 10MB!');return false;}else{this.handleChangeInvoice(file);return true;}};

  其中两次访问后台
1.访问后台将图片上传到本地，并返回本地发票的路径：

1.1 handleChangeInvoice函数通过dva框架的dispatch

dispatch({type:'register/fetchUpload', //register：momodels文件的regi.js文件中的fetchUpload方法payload: formData,//向fetchUpload方法传参，formData包含图片信息}).then((res)=>{   //返回数据}

1.2register文件的fetchUpload方法

 effects: {*fetchUpload({ payload }, { call }) {const response = yield call(uploadFile, payload);//调用service文件里的uploadFile方法，payload为参数return response;   //从后端返回的数据},},

1.2.1前提是需要导入uploadFile方法

import {uploadFile,  //方法名
} from '../services/user';  //含有此方法的文件路径

1.3 service文件夹

// 文件上传
export async function uploadFile(payload) {return request(`http://localhost:8088/q/w`,{method:'POST',body:payload,})
};

后端SpringBoot接收图片

接收图片

public String test(@RequestParam("file") MultipartFile file , HttpServletResponse response, HttpServletRequest request,@RequestParam("uName") String uName,@RequestParam("type") String type) throws IOException {// uploads文件夹位置String rootPath = request.getSession().getServletContext().getRealPath("/");// 原始名称String originalFileName = file.getOriginalFilename();// 创建文件夹File dateDirs = new File("E:\\Work\\second_hand\\public\\icons");File dateDirsAdmin = new File("E:\\Work\\JavaGit\\react\\public\\icons");// 新文件File newFile = new File( dateDirs + "\\"+ originalFileName);File newFileAdmin = new File( dateDirsAdmin + "\\"+ originalFileName);// 判断目标文件所在目录是否存在if( !newFile.getParentFile().exists()) {           //判断文件夹是否存在// 如果目标文件所在的目录不存在，则创建父目录newFile.getParentFile().mkdirs();}/*else if(!newFile.exists()){                         //判断文件(图片)是否存在}else{System.out.println( "该文件已存在！");return "该文件已存在！";}*/// 判断目标文件所在目录是否存在if( !newFileAdmin.getParentFile().exists()) {           //判断文件夹是否存在// 如果目标文件所在的目录不存在，则创建父目录newFileAdmin.getParentFile().mkdirs();}/*else if(!newFileAdmin.exists()){                         //判断文件(图片)是否存在}else{System.out.println( "该文件已存在！");return "该文件已存在！";}*/// 将内存中的数据写入磁盘file.transferTo(newFile);// 将内存中的数据写入磁盘copy(originalFileName, "E:\\Work\\second_hand\\public\\icons", "E:\\Work\\JavaGit\\react\\public\\icons");// 完整的urlString fileUrl = dateDirs  + "\\"  + originalFileName;if(type.equals("发票")){return fileUrl;}System.out.println(fileUrl);String Url = "/icons"  + "/"  + originalFileName;System.out.println(Url);return Url;}

 private static void copy(String filename, String oldpath, String newpath) throws IOException {// TODO Auto-generated method stubFile oldpaths = new File(oldpath + "/" + filename);File newpaths = new File(newpath + "/" + filename);if (!newpaths.exists()) {Files.copy(oldpaths.toPath(), newpaths.toPath());} else {newpaths.delete();Files.copy(oldpaths.toPath(), newpaths.toPath());}}

SpringBoot后端解析发票信息

 //7.验证发票@RequestMapping("/provingInvoice")public Object provingInvoice(@RequestParam Map map){String path = map.get("photo").toString();return Invoice.invoice(path);}

public class Invoice {@Autowiredprivate AuthService authService;/*** 重要提示代码中所需工具类* FileUtil,Base64Util,HttpUtil,GsonUtils请从* https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72* https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2* https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3* https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3* 下载*/public static String invoice(String path) {// 请求url/*String url = "https://aip.baidubce.com/rest/2.0/ocr/v1/invoice";*/String url = "https://aip.baidubce.com/rest/2.0/ocr/v1/vat_invoice";  //增值税发票识别URLtry {// 本地文件路径String filePath = path;byte[] imgData = FileUtil.readFileByBytes(filePath);String imgStr = Base64Util.encode(imgData);String imgParam = URLEncoder.encode(imgStr, "UTF-8");String param = "image=" + imgParam;// 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间， 客户端可自行缓存，过期后重新获取。String accessToken = AuthService.getAuth();String result = HttpUtil.post(url, accessToken, param);System.out.println(result);return result;} catch (Exception e) {e.printStackTrace();}return null;}/* public static void main(String[] args) {Invoice.invoice();}*/
}

    <!--百度api--><!-- https://mvnrepository.com/artifact/com.baidu.aip/java-sdk --><dependency><groupId>com.baidu.aip</groupId><artifactId>java-sdk</artifactId><version>4.12.0</version></dependency>

前后端上传图片（上传发票并获取发票信息）相关推荐

完整的前后端实现上传头像、压缩头像
本文是我在写上传头像功能后的一个详细的总结,用作以后可以回顾,可能较为繁琐,如果明白上传只想看压缩,可直接拉到文章后半部分. 文章目录上传头像上传头像准备工作上传头像上传头像路由配置上传头像 ...
使用nginx反向代理做前后端分离上传大文件速度特别慢
出现的问题环境 VUE+JAVA 问题描述在本地上传100MB+的文件速度特别快,基本上十几秒钟可以上传结束但是上传到服务器后,需要5分钟以上,服务器带宽10MB(阿里云) 检查结果经过多次检 ...
Springboot前后端分离上传、下载压缩包、查看文件
Controller层: /*** 保存附件按钮* @param file 附件* @return 附件路径**/@PostMapping(value = "/upload")Ob ...
Vue前后端的上传和下载模块以及遇到的问题
最近在写VUE的上传和下载记录一下遇到的问题 1.上传部分 2.前端页面下载后端上传后端上传和普通其他的上传一个可以采用普通的文件上传方式就行 @PostMapping("/pic&q ...
wangEditor自定义上传图片上传按钮，适合各种JS或者后端上传
wangEditor是一款优秀的国产编辑器. 轻量级 web 富文本编辑器,配置方便,使用简单.支持 IE10+ 浏览器. 但是自身带的图片上传在上传七牛云可能存在版本问题.还有如果是其他云的JS上传 ...
wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用
wangeditor: 上传图片+上传视频+上传附件(自定义)完整使用一:项目需求:①角色为管理员可以新增编辑文章 + ②点击可以看文章详情 +③ 角色为管理员可以修改编辑文章二:效果: ①角色为 ...
二阶段补充：文件上传服务端处理，后端文件上传、前端两种文件上传方式
1.文件上传 2.后端文件上传两种方案: 兼容性较好的commons-fileupload,支持所有版本的Servlet,即所有版本的Tomcat 优点: 兼容性缺点需要外部jar,比较麻烦.代 ...
解决ServletFileUpload上传文件时,获取上传文件名出现中文乱码问题
解决ServletFileUpload上传文件时,获取上传文件名出现中文乱码问题在我们使用ServletFileUpload上传文件时,我们通常会获取其上传的文件名,然而当文件名包含中文时,便可能出 ...
POI报表下载与上传日历展示预约设置信息
POI报表下载与上传日历展示预约设置信息第5章预约管理-预约设置 1. 需求分析 2. Apache POI 2.1 POI介绍 2.2 入门案例 2.2.1 从Excel文件读取数据 2.2. ...

前后端上传图片（上传发票并获取发票信息）

前后端上传图片（上传发票并获取发票信息）

React+Antd上传图片

后端SpringBoot接收图片

SpringBoot后端解析发票信息

前后端上传图片（上传发票并获取发票信息）相关推荐

最新文章

热门文章