Reactjs 使用react+Vertx上传文件

我正在开发一个web应用程序，我必须在服务器上上传一个用Java+VertX编写的文件

端点如下所示：

private void uploadFromExcel(RoutingContext ctx) {    
    new ImportFromExcel(ctx.getBody(), ctx.vertx()).startImporting(ev->{
        if(ev.failed()){
            ctx.fail(ev.cause());
        }else {
            ctx.response().end();
        }
    });        
}

<input
   accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
   type="file"
   onChange={this.onUploadFile}
 />
   <label htmlFor="flat-button-file">
     <IconButton component="span">
         <Icon className={'material icons'}>cloud_upload</Icon>
     </IconButton>
   </label>

[...]

onUploadFile = (e) =>{
   const {reduxApi, setError, setWait, removeWait} = this.context
   const { dispatchUploadFile } = this.props

   const fileToUpload = e.target.files[0]

   dispatchUploadFile(reduxApi, fileToUpload , (err,data)=>{
      removeWait()
      //e.target.value = null
      if(err){
        setError(err)
        return
       }
   })

   [...]

   dispatchUploadFile: (reduxApi, file, cb) =>{
      dispatch(reduxApi.actions.cryptoindexUploadExcel.post(null,file,cb))
   }

前端是这样的：

private void uploadFromExcel(RoutingContext ctx) {    
    new ImportFromExcel(ctx.getBody(), ctx.vertx()).startImporting(ev->{
        if(ev.failed()){
            ctx.fail(ev.cause());
        }else {
            ctx.response().end();
        }
    });        
}

<input
   accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
   type="file"
   onChange={this.onUploadFile}
 />
   <label htmlFor="flat-button-file">
     <IconButton component="span">
         <Icon className={'material icons'}>cloud_upload</Icon>
     </IconButton>
   </label>

[...]

onUploadFile = (e) =>{
   const {reduxApi, setError, setWait, removeWait} = this.context
   const { dispatchUploadFile } = this.props

   const fileToUpload = e.target.files[0]

   dispatchUploadFile(reduxApi, fileToUpload , (err,data)=>{
      removeWait()
      //e.target.value = null
      if(err){
        setError(err)
        return
       }
   })

   [...]

   dispatchUploadFile: (reduxApi, file, cb) =>{
      dispatch(reduxApi.actions.cryptoindexUploadExcel.post(null,file,cb))
   }

---

这段代码读取文件，但后端部分表示文件长度为零字节。你有什么解决办法吗？谢谢

我假设在服务器端，路由器中有BodyHandler：

router.route().handler(BodyHandler.create());

现在，根据上传文件的方式，文件可能会出现在两个地方：

如果它是一个多部分/表单数据，它将在fileUploads getter下的上下文中可用：

---

它是一个body上传，例如类似于AJAX调用应用程序/json的东西，它最终会出现在body getter中。因此，请确保您使用了正确的标题，因为在上传过程中，浏览器和服务器对标题的处理方式不同。

！问题就在前面。我使用XMLTHTTPRequest重写了upload方法，如下所示：

onUploadFile = (e) =>{
    if(!e.target.files || e.target.files.length==0) return

    const {reduxApi, setError, setWait, removeWait} = this.context
    const fileToUpload = e.target.files[0]

    setWait()

    const xhr = new XMLHttpRequest()
    xhr.open('POST', getRootURL() + "/cryptoindex/index/excel")

   xhr.onload = () => {
     removeWait()
     if(xhr.status!=200){
        setError({...xhr, responseJSON: JSON.parse(xhr.responseText)})
     }else{
       this.refreshAll()
     }
   }

    xhr.send(fileToUpload)
 }

---

这不是最好的解决方案，但它很有效

我认为问题在于。。。似乎没有发送任何数据！