ant desigin的Upload的customRequest自定义自己的上传_ant form upload customrequest

import React from 'react';
import { Upload, message } from 'antd';
import { request } from '@umijs/max'
import { PlusOutlined } from '@ant-design/icons';

interface PaiUploadProps {
  customRequest?: () => void;
  accept?: string;
  maxCount?: number;
  value?: any;
  onChange?: any;
  prefix: string; // prefix  user app
  [key: string]: any;
}

const uploadButton = (
  <div>
    <PlusOutlined />
    <div style={{ marginTop: 8 }}>上传</div>
  </div>
);

const PaiUpload = React.memo((props: PaiUploadProps) => {
  const test = 'test'
  const { value, onChange, accept, maxCount = 22, prefix } = props;

  const uploadImage = async (options: any) => {
    const { onSuccess, onError, file } = options;
    const formData = new FormData();

    formData.append('upfile', file); // 后台要的参数
    formData.append('test', test); // 后台要的参数
    formData.append('prefix', prefix); // 后台要的参数
    return request(`后台接口`, {
      method: 'POST',
      data: formData,
    })
      .then((res) => {
        if (res.code !== 0) {
          onError(res.message, res);
          return;
        }
        const data = res.data;
        file.key = data.key;
        file.thumbUrl = data.url;
        file.url = data.url;
        onSuccess(res, file);
      })
      .catch(onError);
  };

  const onChangeHandle = (info: any) => {
    const { fileList, file } = info;

    if (file.status !== 'uploading') {
    }
    if (file.status === 'done') {
      message.success(`${file.name} ，图片或文件上传成功`);
    } else if (file.status === 'error') {
      message.error(`${file.name} ，上传失败`);
    }

    if (onChange) {
      onChange([...fileList]);
    }
  };
  const onRemove = (file: any) => {
    file.status = 'removed';
    if (onChange) {
      onChange([file], 'removed');
    }
  };

  return (
    <>
      <Upload
        accept={accept}
        fileList={value}
        customRequest={uploadImage}
        onChange={onChangeHandle}
        onRemove={onRemove}
        maxCount={maxCount}
        listType="picture-card"
        multiple={true}
      >
        {!value || value.length < maxCount ? uploadButton : null}
      </Upload>
    </>
  );
});

export default PaiUpload;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

封装好的组件运用