前后分离 上传下载文件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