ReactJS组件将文件上载到Spring MVC/Data-REST服务器

Question

我一直在寻找一段时间ReactJS component来允许你从a上传文件browser并将其保存到服务器ReactJS上运行.

我找到了各种各样的components drag and drop以及superagent可能将文件保存到服务器但是我想有人可能已经创建了component所有这些？

后端是一个使用Spring Boot,Spring Data JPA和Spring Data REST的Java应用程序.

有没有人知道有关设置将文件保存到服务器的基本方法的一个或教程？

解

最后,我使用dropzone和superagent的部分解决方案,然后使用Spring指南(https://spring.io/guides/gs/uploading-files/)

上传者组件

'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

您可能希望通过您的服务器来执行此操作。您使用什么样的后端？如果您使用 Node.js，则有一个名为Multer的 npm 模块可以将文件保存到您的服务器。我在关于React Dropzones 的博文中谈到了一些内容。如果没有有关后端的更多信息，很难准确地说出您需要做什么。