Загрузка файла с реагировать + Vertx - PullRequest
Новая
       9

Загрузка файла с реагировать + Vertx

0 голосов
/ 07 июня 2018

Я работаю над веб-приложением и должен загрузить файл, сервер на котором написан на 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))
   }

Я могу загрузить файл через почтальона, используя заголовок «Accept-Type»: «multipart / form-data».Работает нормально!

К сожалению, я не могу загрузить файл с помощью реакции, он выдает ошибку.Поэтому я решил попробовать другое решение 

let  reader = new FileReader()
reader.onload = (event)  => {
    let arrayBuffer = event.target.result
    let array = new Uint8Array(arrayBuffer)
    let binaryString = String.fromCharCode.apply(null, array)
    console.log(binaryString)

    setWait()
    dispatchUploadFile(reduxApi, array , (err,data)=>{
      removeWait()
      if(err){
        setError(err)
        return
      }
    })

}
reader.readAsArrayBuffer(fileToUpload)

Этот фрагмент кода читает файл, но внутренняя часть говорит: «Ноль байтов длинного файла».Есть ли у вас какие-либо решения?Спасибо!

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

РЕШИТЬ!Проблема была во Фронтенде.Я переписал метод загрузки с использованием XMLTHTTPRequest следующим образом: 

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)
 }

Это не лучшее решение, но оно работает!

0 голосов
/ 07 июня 2018

Я предполагаю, что на стороне сервера у вас есть BodyHandler в вашем маршрутизаторе: 

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

Теперь, в зависимости от способа загрузки файла, он может оказаться в 2 местах:

Если это multipart/form-data, то оно будет доступно в контексте в параметре fileUploads() getter: 

Set<FileUpload> uploads = routingContext.fileUploads();
// Do something with uploads....

Это загрузка тела, например, что-то вроде вызова AJAX application/json, оно заканчиваетсяв body() добытчике.Поэтому убедитесь, что вы используете правильные заголовки, так как они обрабатываются по-разному как браузером, так и сервером во время загрузки.

...