antd组件Upload实现自己上传的实现示例

//添加按钮的样式const uploadButton = (  <div>  <Icon type="plus" />  <div className="ant-upload-text">Upload</div>  </div> );<Upload    //样式    className={styles['override-ant-btn']}    //陈列样式，现在是卡片式    listType="picture-card"    //再图片上传到页面后执行的函数，自定义让他不执行    beforeUpload={() => false}    //数据，即图片，是一个数组    fileList={fileList}    //当点击查看时调用（上图的那个眼睛）    onPreview={this.handlePreview}    //数据改变时调用    onChange={this.handleChange}   >    //当不少于一张图时，不显示怎加图片的按钮。    {fileList.length >= 1 ? null : uploadButton}   </Upload>

 handlePreview = (file) => { this.setState({  previewImage: file.url || file.thumbUrl,  visible: true, }); };  <Modal visible={visible} footer={null} onCancel={this.handleCancel}>    <img alt="加载" style={{ width: '100%',height: '100%' }} src={previewImage} />  </Modal>

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

fileList: [{   uid: 'id',   name: '标题',   //目前的状态   status: 'done',   //图片的url或者base64   url: '',   type: 'image/jpeg',  }],

//通过前端原生XMLHttpRequest动态获取上传文件进度doTransferFile = (file) => { let mySelf = this; let formData = new FormData(); let url = "http://xxx:444/upload_file.php"; let file = document.getElementById("chooseFile").files[0]; console.log(file)  formData.append("file",file); // console.log(modal); // console.log(formData); // return false; /* eslint-disable */ $.ajax({   url : url,   type : 'POST',  enctype: 'multipart/form-data',  data : formData,   // 告诉jQuery不要去处理发送的数据  processData : false,   // 告诉jQuery不要去设置Content-Type请求头  contentType : false,  timeout : 60000,//设置超时时间  beforeSend:function(){   console.log("现在开始上传文件！"); notification['info']({ message: '提示', description: '现在开始上传文件！', });  },  xhr: function(){ let myXhr = $.ajaxSettings.xhr(); // console.log(myXhr) if(myXhr.upload){ myXhr.upload.addEventListener('progress',function(e) {  if (e.lengthComputable) {  let percent = Math.floor((e.loaded/e.total)*100);  // console.log(e.loaded)  // console.log(e.total)  console.log(percent)  let upload = mySelf.state.upload;  upload.progress.loaded = e.loaded;  upload.progress.total = e.total;  upload.progress.percentage = percent;  mySelf.state.upload = upload;   // console.log(info);   mySelf.setState({    upload: upload   });  } },false);  myXhr.upload.addEventListener('load',function(e) {  console.log('fish') },false);  } return myXhr;  },  success : function(res) {   console.log(res)   },   error : function(res) {    }  });};