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