1. /* eslint no-console:0 */
    2. import React from 'react';
    3. import axios from 'axios';
    4. import { Upload } from 'antd';
    6. const uploadProps = {
    7.   action: '/upload.do',  // 接口
    8.   multiple: false,  // 是否支持多选文件 false为不支持
    9.   data: { a: 1, b: 2 }, // 上传的额外参数
    10.   headers: {    // 请求头
    11.     Authorization: '$prefix $token',
    12.   },
    13.   onStart(file) {  // 开始上传
    14.     console.log('onStart', file, file.name);
    15.   },        
    16.   onSuccess(res, file) {    // 上传成功
    17.     console.log('onSuccess', res, file.name);
    18.   },
    19.   onError(err) {    // 上传失败
    20.     console.log('onError', err);
    21.   },
    22.   onProgress({ percent }, file) {   // 监听上传进度
    23.     console.log('onProgress', `${percent}%`, file.name);
    24.   },
    25.   customRequest({   // 自定义上传，覆盖默认
    26.     action,
    27.     data,
    28.     file,
    29.     filename,
    30.     headers,
    31.     onError,
    32.     onProgress,
    33.     onSuccess,
    34.     withCredentials,
    35.   }) {
    36.     // EXAMPLE: post form-data with 'axios'
    37.     // eslint-disable-next-line no-undef
    38.     const formData = new FormData();
    39.     if (data) {
    40.       Object.keys(data).forEach((key) => {
    41.         formData.append(key, data[key]);
    42.       });
    43.     }
    44.     formData.append(filename, file);
    46.     axios
    47.       .post(action, formData, {
    48.         withCredentials,
    49.         headers,
    50.         onUploadProgress: ({ total, loaded }) => {
    51.           onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) }, file);
    52.         },
    53.       })
    54.       .then(({ data: response }) => {
    55.         onSuccess(response, file);
    56.       })
    57.       .catch(onError);
    59.     return {
    60.       abort() {
    61.         console.log('upload progress is aborted.');
    62.       },
    63.     };
    64.   },
    65. };
    67. const Test = () => {
    68.   return (
    69.     <div
    70.       style={{
    71.         margin: 100,
    72.       }}
    73.     >
    74.       <div>
    75.         <Upload {...uploadProps}>
    76.           <button type="button">开始上传</button>
    77.         </Upload>
    78.       </div>
    79.     </div>
    80.   );
    81. };
    83. export default Test;