大文件上传与下载

开发环境

后端:springCloud

前端:dva+react

问题

1、大文件上传失败

springCloud可以设置文件上传的大小(不同的版本设置参数可能不同)

如下：

1. spring.http.multipart.enabled=true

2. spring.http.multipart.max-file-size=20MB

3. spring.http.multipart.max-request-size=1000MB

实际中上传的文件可能会很大，前台文件上传设置也不会根据后台设置进行控制，有可能需要上传1G多的文件

这时如果上传1G多的文件，则会受后端限制，从而上传失败

所以需要对文件进行适当的分片

普通文件上传

前端代码：

function uploadFile(data,url){
    let obj = {
        method:'post',
        url:url,
        data:data,
        headers:{
            'Content-Type':'multipart/form-data',
        }
    }
    retrun Axios.create().request(obj).then(res => {
        return res;
    }).catch(err => {
        console.log(err);
        return ''
    })
}

后端代码:

public static void upload(InputStream input,String url){
        OutputStream os = null;
        try{
            os = new FileOutputStream(url);
            byte[] b = new byte[1024];
            int length = 0;
            while ((length = input.read(b)) > 0){
                os.write(b,0,length);
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            try{
                os.close();
            }catch (IOException e){
                e.printStackTrace();
            }
            try{
                input.close();
            }catch (IOException e){
                e.printStackTrace();
            }
        }
    }

大文件上传

参考:https://blog.csdn.net/u014150463/article/details/74044467(包括断点续传，秒传，本人只是用了大文件分片上传，以下代码做了部分修改)

前端代码

使用的是WebUploader组件(https://fex.baidu.com/webuploader/doc/index.html)

import React from 'react';
import { connect } from 'dva';
import { Button,message,Modal} from 'antd';
import WebUploader from 'webuploader'
import styles from './webuploader.less'
import $ from 'jquery'
// 实例化

class ModalContent extends React.Component {


  componentDidMount(){
    debugger
    var $btn = $('#ctlBtn');
    var chunkSize = 5 * 1024 * 1024;
    var uploader = WebUploader.create({
      pick: {
        id: '#picker',
        label:'请选择文件',
        title:''
      },
      formData: {
        uid: 0,
        md5: '',
        chunkSize: chunkSize
      },
      chunked: true,
      chunkSize: chunkSize, // 字节 5M分块
      threads: 1,
      server: 'http://localhost:9090/index/fileUpload',
      auto: false,
      // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
      disableGlobalDnd: true,
      fileNumLimit: 1024,//验证文件总数量, 超出则不允许加入队列
      fileSizeLimit: 1024 * 1024 * 1024,    // 验证文件总大小是否超出限制, 超出则不允许加入队列
      fileSingleSizeLimit: 1024 * 1024 * 1024    // 验证单个文件大小是否超出限制, 超出则不允许加入队列
    });

//当某个文件的分块在发送前触发，主要用来询问是否要添加附带参数，大文件在开起分片上传的前提下此事件可能会触发多次。
    uploader.onUploadBeforeSend = function (obj, data) {
      var file = obj.file;
      data.uid = file.uid;
    };
    uploader.on('uploadError', function (file) {
      $('#' + file.id).find('p.state').text('上传出错');
    });
// 文件上传
    $btn.on('click', function () {
      uploader.upload();
    });
  }
  render() {
    return (
      <div  className="wu-example">
        <div id="thelist" className="uploader-list"></div>
        <div className="btns">
          <div id="picker"/>
          {/*<Button id='ctlBtn' className="btn btn-default">开始上传</Button>*/}
        </div>
      </div>
    );
  }
}
//将需要的state的项注入到与此视图数据相关的组件props上
function mapStateToProps({ example }) {
  return { example }
}
export default connect(mapStateToProps)(ModalContent);

[class ^= webuploader-container] {
	position: relative;
}
[class ^= webuploader-element-invisible] {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6,