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

前后分离 上传下载文件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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值