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

Question

我一直在寻找一个 ReactJS component 来让你从 browser 上传文件并将其保存到服务器 ReactJS 正在运行。

我发现了各种用于拖放等的component和superagent可能将文件保存到服务器，但我认为有人可能已经为所有这些创建了一个组件？

后端是使用 Spring Boot、Spring Data JPA 和 Spring Data REST 的 Java 应用程序。

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

解决方案

最后，我将下面的部分解决方案与 dropzone 和 superagent 一起使用，然后使用了 Spring 指南 ( https://spring.io/guides/gs/uploading-files/ )

uploader 组件

'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

文件上传 Controller

@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 的博文中谈到了一些.如果没有关于后端的更多信息，很难准确说明您需要做什么。