form表单文件上传与下载

1、文件下载：

　　<i className={styles.uploadFile} onClick={this.downloadTemplate}></i>   //按钮

downloadTemplate = () => { //点击事件
  window.open("绝对路径");
}

2、文件上传（使用form表单）//ant design上开发

<form id="saveFileForm" name="saveFileForm">
  <Row gutter={40} style={{display:'flex',margin:'0'}}>
    <Col className="gutter-row" style={{width:'40%',padding:'0',display:'flex'}}>
      <FormItem label="员工信息" {...formItemLayout2}>
        <div className={styles.uploadContainer} >
          <div id="image-holder" className={styles.uploadIcon}>
            <span className={styles.spanText}>上传文件</span>
            <div id="image-box" className={styles.imagBox}></div>
          </div>
          <Icon type="upload" className={styles.uploadIconImg} />
          <input type="file" name="excel" multiple={false} onChange={this.goPreview.bind(this,'fileFromName')} id="fileFromName" className={styles.uploadFile}  />
          <p style={{height:'28px',lineHeight:'28px',margin:'0',width:'250%',fontSize:'12px'}}>{this.state.fileFromName}</p>
        </div>
      </FormItem>
    </Col>
    <Col className="gutter-row">
      <FormItem {...formItemLayout2}>
        <div className={styles.uploadContainer} >
          <div id="image-holder" className={styles.uploadIcon}>
            <span className={styles.spanText}>下载模板</span>
            <div id="image-box" className={styles.imagBox}></div>
          </div>
          <Icon type="download" className={styles.uploadIconImg} />
          <i className={styles.uploadFile} onClick={this.downloadTemplate}></i>
        </div>
      </FormItem>
    </Col>
  </Row>
  <Row gutter={40} style={{display:'flex'}}>
    <Col className="gutter-row" style={{width:'46%',margin:'0',display:'flex'}}>
      <FormItem label="人员照片" {...formItemLayout2}>
        <div className={styles.uploadContainer} >
          <div id="image-holder" className={styles.uploadIcon}>
            <span className={styles.spanText}>上传文件</span>
            <div id="image-box" className={styles.imagBox}></div>
          </div>
          <Icon type="upload" className={styles.uploadIconImg} />
          <input type="file" name="zip" multiple={false} onChange={this.goPreview.bind(this,'fileImgName')} id="fileImgName" className={styles.uploadFile}  />
          <p style={{height:'28px',lineHeight:'28px',margin:'0',width:'250%',fontSize:'12px'}}>{this.state.fileImgName}</p>
        </div>
      </FormItem>
    </Col>
  </Row>
</form>

事件：

goPreview(fileId,e){
  var that = this;
  var ele = document.getElementById(fileId);
  console.log("000000000000", e, ele.files[0]);
  if (typeof (FileReader) != "undefined") {
    if(fileId == 'fileImgName'){
      that.setState({
        fileImgName:ele.files[0].name
      });
    }else{
      that.setState({
        fileFromName:ele.files[0].name
      });
    }
  } else {
    alert("你的浏览器不支持FileReader.");
  }
}

3、点击事件上传：

handleUpload = () => {
  var form = document.getElementById("saveFileForm");
  var formData = new FormData(form);
  formData.append("enterpriseNum", 'chaowei');
  var oReq = new XMLHttpRequest();
  oReq.onreadystatechange = function () {
    if (oReq.readyState == 4) {
      var json = JSON.parse(oReq.responseText);
      console.log(json);
      if (json.code == 0) {
        message.success("导入成功");
      }else{
        message.warning('导入失败');
      }
    }
  }
  oReq.open("POST", "/cds/employee/import");//接口url
  oReq.setRequestHeader('token', getToken());//token
  oReq.send(formData);//数据发送
  return false;
}

处理多张图片同时上传：https://www.cnblogs.com/weapon-x/p/5237064.html