美文网首页
Upload在antdesign+react中的使用

Upload在antdesign+react中的使用

作者: kim_jin | 来源:发表于2019-03-22 13:49 被阅读0次

我们要实现的是在点击上传按钮的时候,弹出一个对话框,在选择文件的之后点击完成的时候,向指定的地址上传文件

弹框

html的相关代码

<!--html文件-->
<!--multiple为true可以同时上传多个文件-->
<!--showUploadList 为false不现实文件的上传情况-->
<Upload
  multiple ={true}
  accept ='.mib'
  beforeUpload = {this.uploadMibfiles}
  onChange ={this.fileState}
  showUploadList = {false}
/>

js的逻辑代码

// 将获取到的文件进行保存,方便后续进行操作
uploadMibfiles = file =>{
 this.fileList = file;
}

 fileState = info =>{
  if(this.fileListMy && this.fileListMy.length !== 0){
    // 写相关发请求的逻辑
    apiUp (this.fileList).then(res =>{
      if  (res !== 202){
        message.success('文件上传成功')
      }else{
        message.errro("文件上传失败")
      }
    })
  }
}

发送请求的代码

const apiUp = async file =>{
  const formData = new FormData(); // 将文件变成键值的形式,可以方便的处理各类的文件
  formData .append('file',file);
  const res = await axios.post('/wdfedf/guyfewj',formDate);
  return res;
}

相关文章

网友评论

      本文标题:Upload在antdesign+react中的使用

      本文链接:https://www.haomeiwen.com/subject/xnblvqtx.html