使用antd中的Upload组件上传图片_antd upload

实现的功能：

• 上传图片
• 支持预览和删除
• 新上传的图片的不支持下载功能，应该是在本地上传的图片没有找到对应的url

upload文件

用户可以上传图片并在列表中显示缩略图。当上传照片数到达限制后，上传按钮消失。

import React from 'react';
import { Upload, Icon, Modal, message } from 'antd';
import $state from '../state'
import { observer } from 'mobx-react'
import { toJS } from 'mobx'

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);
  });
}

@observer
class UploadFiles extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      previewVisible: false,
      previewImage: '',
      loading: false,
    }
  }


  //模态框关闭
  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 = ({ file, fileList }) => {
   
    $state.addFile = fileList

  };

   //限制文件上传的格式和大小
  //  beforeUpload = (file) => {

  //   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  //   if (!isJpgOrPng) {
  //     message.error('仅支持 JPG/PNG 格式的图片!');
  //   }
  //   const isLt2M = file.size / 1024 / 1024 < 2;
  //   if (!isLt2M) {
  //     message.error('图片大小不能超过2M!');
  //   }
  //   return isJpgOrPng && isLt2M;
  // }


  //自定义上传
  /*customRequest = (option) => {
     console.log(option);
     let data = new FormData()// 创建一个 FormData对象，然后调用它的 append()方法来添加字段
     console.log(data);
     data.append('file', option.file)
      // 附件种类 TRANS：交易结构图；EQSTR：股权结构图；CUSTR自定义上传图；CAREP投决报告；REREP评审报告；DEPRO开发项目---后端定义
     data.append('attachType', 'CUSTR')
     //来源系统编码 1：门户网站；2：控台；3：fdms系统---后端定义
     data.append('sourceSys', 1)
     console.log(data.get('file'));
 
     //调取上传的接口
     $state.uploadFile(data)
   }*/


  //删除某一项
  /*onRemove = (file) => {

    let delIndex = addFile.findIndex(item => item.uid === file.uid)

    $state.addFile.splice(delIndex, 1)
  }*/

  render () {

    const { previewVisible, previewImage } = this.state;
    
    const uploadButton = (
      <div>
        <Icon type='plus' />
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    return (
      <div className="clearfix" >
        <Upload
          multiple//是否支持多选文件
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"//上传的地址
          listType="picture-card"//上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card
          fileList={toJS($state.addFile)}//已经上传的文件列表（受控）
          onPreview={this.handlePreview}//点击文件链接或预览图标时的回调
          onChange={this.handleChange}//上传文件改变时的状态
        // beforeUpload={this.beforeUpload}//限制用户上传的图片格式和大小。
        // customRequest={this.customRequest}//自定义上传
        // onRemove={this.onRemove}//点击移除文件时的回调
        //onDownload//点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页。
        >
          {$state.addFile.length >= 5 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    );
  }
}

export default UploadFiles

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126

state文件-----存取数据

import { observable, action, } from 'mobx';
import { message } from 'antd'

class State {
  //存放所有的文件,自定义上传的话，将代替fileList
  @observable addFile = [{
    uid: '-1',
    name: 'image.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  {
    uid: '-2',
    name: 'image.png',
    status: 'error',
  },]


   //自定义上传文件时，调取上传文件的接口
   /*
  @action uploadFile = async (file) => {
    console.log(file);
    try {
      const res = await $Service.upload(file)
      if (res.data && res.data.code == 200) {
        const { modelList } = res.data;
        this.addFile.push({
          url: modelList[0].filePath.substr(modelList[0].filePath.indexOf('/eps')),//截掉eps之前的数据
          uid: modelList[0].fileNum,
          status: 'done',
          name:modelList[0].fileName
        })
        message.success('图片上传成功');
      } else {
        message.error('上传图片失败');
      }
    } catch (error) {
      console.log(error)
    }

  }
  */
}

export default new State()
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