ant design 上传文件，支持批量上传

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Mr_yangzc/article/details/89178927

ant design 上传文件
https://ant.design/components/upload-cn/
采用 自定义上传文件 ，如果 批量上传获取不到文件 直接看最后

点击按钮调用的方法 使用 FormData 进行上传
*需要引用 import reqwest from 'reqwest';

addaOk(e) {
    let {fileList} = this.state;
    let that = this;
    let formData = new FormData();
   // 批量上传
    // for(let item of fileList){
    //   formData.append('files', item)
    // }
    // 的那个上传
    formData.append('files', fileList[0])
    // formData.append('tm', values.tm.format('YYYY-MM-DD HH:mm'))
    reqwest({
      url: '/services/mountainditchmanage/insertmountainditchandproject', // 上传url
      method: 'post',
      processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
      contentType : false, //必须false才会自动加上正确的Content-Type
      data: formData,
      success: () => {
        message.success('上传成功');

        // that.setState({
        //   fileList: [],
        // })
        // that.props.form.resetFields();
      },
      error: () => {
        message.error('上传失败');
      },
    });


  }

ant.design Upload 前台

  const props = {
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

          <Upload
               {...props}>
                <Button>
                  <Icon type="upload"/>
                </Button>
              </Upload>

<Button style={{}} type="primary" onClick={this.addaOk.bind(this)}>确认</Button>

后台使用 MultipartFile 接受， 如果是批量 加 MultipartFile[] 单个 MultipartFile 一定要注意
(@RequestParam(value = “files”, required = true) value中的值一定要与 上传文件名称一致。。。

      public Message insertMountainDitchAndProject(@RequestParam(value = "files", required = true) MultipartFile[] files) {
            //判断file数组不能为空并且长度大于0
            if (files != null && files.length > 0) {
                //循环获取file数组中得文件
                for (int i = 0; i < files.length; i++) {
                    MultipartFile file = files[i];
                }
            }
            }

如果 你要批量上传 需要在前台 上传代码中 用循环添加file,否则后台一直获取不到文件

addaOk(e) {
    let {fileList} = this.state;
    let that = this;


    let formData = new FormData();
// 循环添加file
    for(let item of fileList){
      formData.append('files', item)
    }
    
    // formData.append('files', fileList[0])
    // formData.append('tm', values.tm.format('YYYY-MM-DD HH:mm'))

    reqwest({
      url: '/services/mountainditchmanage/insertmountainditchandproject',
      method: 'post',
      processData : false,  //必须false才会避开jQuery对 formdata 的默认处理
      contentType : false, //必须false才会自动加上正确的Content-Type
      data: formData,
      success: () => {
        message.success('上传成功');

        // that.setState({
        //   fileList: [],
        // })
        // that.props.form.resetFields();
      },
      error: () => {
        message.error('上传失败');
      },
    });


  }