import React from "react";

import ReactDOM from "react-dom";

import Upload from "rc-upload";

import axios from "axios";

​

const uploadProps = {

  action: "/upload.do",

  multiple: false,

  data: { a: 1, b: 2 },

  headers: {

    Authorization: "$prefix $token"

  },

  onStart(file) {

    console.log("onStart", file, file.name);

  },

  onSuccess(ret, file) {

    console.log("onSuccess", ret, file.name);

  },

  onError(err) {

    console.log("onError", err);

  },

  onProgress({ percent }, file) {

    console.log("onProgress", `${percent}%`, file.name);

  },

  customRequest({

    action,

    data,

    file,

    filename,

    headers,

    onError,

    onProgress,

    onSuccess,

    withCredentials

  }) {

    // EXAMPLE: post form-data with 'axios'

    const formData = new FormData();

    if (data) {

      Object.keys(data).forEach(key => {

        formData.append(key, data[key]);

      });

    }

    formData.append(filename, file);

​

    axios

      .post("somewhere", formData, {

        withCredentials,

        headers,

        onUploadProgress: ({ total, loaded }) => {

          onProgress(

            { percent: Math.round((loaded / total) * 100).toFixed(2) },

            file

          );

        }

      })

      .then(({ data: response }) => {

        onSuccess(response, file);

      })

      .catch(onError);

​

    return {

      abort() {

        console.log("upload progress is aborted.");

      }

    };

  }

};

​

const Test = () => {

  return (

    <div

      style={{

        margin: 100

      }}

    >

      <div>

        <Upload {...uploadProps}>

          <button>开始上传</button>

        </Upload>

      </div>

    </div>

  );

};

​

ReactDOM.render(<Test />, document.getElementById("root"));

​