Antdupload小结

一、Antdupload的概述

Antdupload是一个基于React框架的上传组件。它使用了Ant Design的风格，并提供了丰富的上传功能。在使用Antdupload之前，我们需要先安装Ant Design和React。

二、Antdupload的使用

1、引入Antdupload和Ant Design样式

import { Upload } from 'antd';
import 'antd/dist/antd.css';

2、构造上传组件

const props = {
  name: 'file',
  action: '/upload.do',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
};
ReactDOM.render(
  
   
    
    
      
      Click to Upload
    
  
   ,
  mountNode,
);

3、参数说明：

action: 上传地址，必选参数
data: 上传所需数据或上传函数，可选参数
defaultFileList: 默认已上传的文件列表。数组中的每个对象均需包含 uid 属性
directory: 支持上传文件夹，IE10+ 以及 Edge 浏览器不支持该参数
headers: 设置上传的请求头部
listType: 上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card
multiple: 是否支持多选文件
name: 发到后台的文件参数名
showUploadList: 显示已上传文件列表的样式

三、Antdupload的新特性

1、Chunk Upload

Antdupload支持大文件上传，以及将大文件拆分为多个块同时上传，从而提高上传速度和稳定性。这样做的好处是，如果某一块上传失败，只需要重新上传该块即可，不需要重新上传整个文件。

import { Upload } from 'antd';
import 'antd/dist/antd.css';

const props = {
  name: 'file',
  action: '/upload.do',
  headers: {
    authorization: 'authorization-text',
  },
  onChange(info) {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} file upload failed.`);
    }
  },
  data: {
    chunkCount: 4,
  },
  listType: 'picture',
  multiple: true,
};
ReactDOM.render(
  
   
    
    

      
    
    
    
Click or drag file to this area to upload
    
    
Support for a single or bulk upload.
  
   ,
  mountNode,
);

2、Image Preview

Antdupload支持图片预览功能，同时支持自定义预览和删除操作。

import { Upload, Modal } from 'antd';
import 'antd/dist/antd.css';

const { confirm } = Modal;

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}

class PicturesWall extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [
      {
        uid: '-1',
        name: 'image.png',
        status: 'done',
        url: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
      },
    ],
  };

  handleCancel = () => this.setState({ previewVisible: false });

  handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }

    this.setState({
      previewImage: file.url || file.preview,
      previewVisible: true,
    });
  };

  handleChange = ({ fileList }) => this.setState({ fileList });

  handleRemove = file => {
    confirm({
      title: 'Delete this file?',
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  render() {
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      
   

        
        
    
Upload
    
      
   
    );
    return (
      
   

        
          {fileList.length >= 8 ? null : uploadButton}
        
    
        
          
        
    
      
   
    );
  }
}

ReactDOM.render(
   , mountNode);

四、Antdupload的常见问题

1、如何自定义上传组件

import React from 'react';
import { Upload, Button, Icon } from 'antd';
import 'antd/dist/antd.css';

class CustomUpload extends React.Component {
  render() {
    const { text, onChange } = this.props;
    return (
      
   
        {text ?  : 
    
      Click to Upload}
      
   
    );
  }
}

ReactDOM.render(
   , mountNode);

2、如何实现拖拽上传文件

import React from 'react';
import { Upload, message, Button } from 'antd';
import 'antd/dist/antd.css';

class DragUpload extends React.Component {
  state = {
    fileList: [],
  }

  handleChange = info => {
    let fileList = [...info.fileList];

    fileList = fileList.map(file => {
      if (file.response) {
        file.url = file.response.url;
      }
      return file;
    });

    this.setState({ fileList });
  };

  render() {
    const { fileList } = this.state;
    const props = {
      name: 'file',
      multiple: false,
      action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
      onChange: this.handleChange,
      onDrop(e) {
        console.log('Dropped files', e.dataTransfer.files);
      },
      beforeUpload(file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          message.error('Image must smaller than 2MB!');
        }
        return isJpgOrPng && isLt2M;
      },
      fileList,
    };
    return (
      
   
        
    

          
        
        
    
Click or drag file to this area to upload
        
    

          Support for a single or bulk upload.
        
      
   
    );
  }
}

ReactDOM.render(
   , mountNode);