react antd upload组件 axios Springboot jpa 前后分离上传下载文件 demo

最新推荐文章于 2024-11-20 11:30:35 发布

头皮凉

最新推荐文章于 2024-11-20 11:30:35 发布

阅读量774

点赞数

CC 4.0 BY-SA版权

分类专栏： react / antd 文章标签： java react upload

本文链接：https://blog.youkuaiyun.com/bytesflying/article/details/107945640

前后分离上传下载文件demo

此篇文章只是我在学习中总结的一点经验，简单的小demo，只贴一些相关代码，里边加了注释，如有技术问题，欢迎指正。
本demo小介绍：没有扩展jpa的那部分。没有扩展后台限制文件大小的部分。文件上传到oracle Blob字段中存放（可自行扩展其它存放方式），在从中下载。

一、上传

react部分：

//引入：
import React from 'react';
import {
   
    Upload, Icon, message } from 'antd';
import {
   
    config } from '../../../../../common/config';
import styles from './uploadFile.less';

const {
   
    Dragger } = Upload;
const {
   
    contextPath } = config;

class EngineUploadComponent extends React.Component {
   
   

//在此可用于上传前的校验，可根据具体业务具体扩展
  beforeUpload = file => {
   
   
    // const png = file.type === "image/png";
    // if (!png ) {
   
   
    // message.error("图片格式不正确");
    //  return png ;
    //  }
    const fileSize= file.size / 1024 / 1024 < 10;
    if (!fileSize) {
   
   
      message.error(file.name + "文件大小超出限制（10MB），请修改后重新上传");
      return fileSize;
    }
  };

//在此可进行上传过程中或上传状态变化时处理

  handleChange = (info) =>{
   
   
    if(info.file.status ==='uploading'){
   
   //正在上传
    
    }else if(info.file.status ==='done'){
   
   //上传成功
      let fjmc = info.file.response.fjmc;
      message.success(fjmc+'上传成功!');
    }else if(info.file.status ==='error'){
   
   //上传失败
      //let fjmc = info.file.response.fjmc;
      message.error