ReactJS komponent załadować plik do wiosny MVC serwera/Dane REST

Question

I zostały szukasz chwilę na ReactJScomponent co pozwala załadować plik z browser i zostało ono zapisane na serwerze ReactJS jest uruchomiony .

znalazłem różne component s dla drag and drop etc i superagent dla ewentualnie zapisanie pliku na serwerze, ale pomyślałem, ktoś stworzył component za to wszystko?

Back-end to aplikacja Java wykorzystująca Spring Boot, Spring Data JPA i Spring Data REST.

Czy ktoś wie o jednym lub samouczku na temat konfiguracji podstawowego sposobu zapisywania pliku na serwerze?

Rozwiązanie

W końcu Części roztworu poniżej zrzutowiska i superagent a następnie wykorzystuje się sprężyny prowadzącej (https://spring.io/guides/gs/uploading-files/)

składnik

Udostępniający

'use strict'; 

const React = require('react'); 
const ReactDOM = require('react-dom'); 

const log = require('./log'); // logger to enable debug alerts 

// import the components 
const Dropzone = require('react-dropzone'); 
const request = require('superagent'); 

//'application/java-archive' 
class Uploader extends React.Component { 
    constructor(props) { 
    super(props); 
    this.dropHandler = this.dropHandler.bind(this); 
    } 

    dropHandler(file) { 
    var jsonFile = new FormData(); 
    jsonFile.append('file', file[0]); 
    jsonFile.append('name', file[0].name); 

    request.post('/upload') 
    .send(jsonFile) 
    .end(function(err, resp) { 
     if (err) { 
     console.error(err); 
     } 
     return resp; 
    }); 
    } 


    render() { 
    return (
     <Dropzone disableClick={false} multiple={false} accept={'application/java-archive'} onDrop={this.dropHandler}> 
     <div> Drop a Appium Jar, or click to add. </div> 
     </Dropzone> 
    ); 
    } 
} 

module.exports = Uploader 

FileUploadController

@Controller 
public class FileUploadController { 

    @RequestMapping(value="/upload", method=RequestMethod.GET) 
    public @ResponseBody String provideUploadInfo() { 
     return "You can upload a file by posting to this same URL."; 
    } 

    @RequestMapping(value="/upload", method=RequestMethod.POST) 
    public @ResponseBody ResponseEntity<String> handleFileUpload(@RequestParam("name") String name, 
      @RequestParam("file") MultipartFile file) throws Exception{ 
     if (name.contains("/")) { 
      return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body("Folder separators not allowed."); 
     } else if (name.contains("/")) { 
      return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body("Relative pathnames not allowed."); 
     } else if (!name.endsWith(".jar")) { 
      return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body("File type not allowed. Must be a Jar file type ending in '.jar'."); 
     } 

     if (!file.isEmpty()) { 
      try { 
       byte[] bytes = file.getBytes(); 
       BufferedOutputStream stream = 
         new BufferedOutputStream(new FileOutputStream(new File(name))); 
       stream.write(bytes); 
       stream.close(); 
       return ResponseEntity.ok("File " + name + " uploaded."); 
      } catch (Exception e) { 
       return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body(e.getMessage()); 
      } 
     } else { 
      return ResponseEntity.status(HttpStatus.UNPROCESSABLE_ENTITY).body("You failed to upload " + name + " because the file was empty."); 
     } 
    } 
} 

Answer 1

Chciałbyś zrobić to za pośrednictwem swojego serwera. Jakiego rodzaju backendu używasz? Jeśli korzystasz z Node.js, istnieje moduł npm o nazwie Multer, który zapisuje pliki na serwerze. Mówię o tym w moim blogu o numerze: react dropzones. Bez dodatkowych informacji na temat twojego backendu trudno powiedzieć dokładnie, co musisz zrobić.

Answer 2

Najlepsza odpowiedź na temat this SO post implementuje przesyłanie plików przy użyciu komponentu i sklepu. React-dropzone jest również dość łatwy w użyciu.