使用 ReactJS 上传文件组件答案

【问题标题】：Upload File Component with ReactJS使用 ReactJS 上传文件组件
【发布时间】：2015-02-26 18:53:41
【问题描述】：

我一直在到处寻找有关制作组件的帮助，以帮助管理从 React 中将文件上传到我设置的端点。

我尝试了许多选项，包括集成 filedropjs。我决定反对它，因为我无法控制它在 DOM 中使用 new FileDrop('zone', options); 设置的元素

这是我目前所拥有的：

module.exports =  React.createClass({
displayName: "Upload",
handleChange: function(e){

    formData = this.refs.uploadForm.getDOMNode();

    jQuery.ajax({
        url: 'http://example.com',
        type : 'POST',
        xhr: function(){
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
            }
            return myXhr;
        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
            alert(data);
        }
    });

},
render: function(){

        return (
            <form ref="uploadForm" className="uploader" encType="multipart/form-data" onChange={this.handleChange}>
                <input ref="file" type="file" name="file" className="upload-file"/>
            </form>
        );
   }

 });



},
render: function(){

    console.log(this.props.content);

    if(this.props.content != ""){
        return (
            <img src={this.props.content} />
        );
    } else {
        return (
            <form className="uploader" encType="multipart/form-data" onChange={this.handleChange}>
                <input ref="file" type="file" name="file" className="upload-file"/>
            </form>
        );
    }
}
});

如果有人能指出我正确的方向，我会送一些虚拟的拥抱。我一直在做这方面的工作。我觉得我很接近，但并不完全在那里。

谢谢！

【问题讨论】：

不确定你是否可以使用它——可能不会——但以防万一：hayageek.com/docs/jquery-upload-file.php
像jsbin.com/qulozo/2 这样简单的东西怎么样？
我整理了一篇简单的博文，概述了使用 React 和 Node.js 上传图像并上传到 S3 的简单步骤：benrlodge.com/blog/post/…
@Dan 你能发布你最终选择的解决方案吗？谢谢

标签： jquery ajax reactjs

【解决方案1】：

我也为此工作了很长时间。这是我想出的。

一个Dropzone 组件，加上使用superagent。

// based on https://github.com/paramaggarwal/react-dropzone, adds image preview    
const React = require('react');
const _ = require('lodash');

var Dropzone = React.createClass({
  getInitialState: function() {
    return {
      isDragActive: false
    }
  },

  propTypes: {
    onDrop: React.PropTypes.func.isRequired,
    size: React.PropTypes.number,
    style: React.PropTypes.object
  },

  onDragLeave: function(e) {
    this.setState({
      isDragActive: false
    });
  },

  onDragOver: function(e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';

    this.setState({
      isDragActive: true
    });
  },

  onDrop: function(e) {
    e.preventDefault();

    this.setState({
      isDragActive: false
    });

    var files;
    if (e.dataTransfer) {
      files = e.dataTransfer.files;
    } else if (e.target) {
      files = e.target.files;
    }

    _.each(files, this._createPreview);
  },

  onClick: function () {
    this.refs.fileInput.getDOMNode().click();
  },

  _createPreview: function(file){
    var self = this
      , newFile
      , reader = new FileReader();

    reader.onloadend = function(e){
      newFile = {file:file, imageUrl:e.target.result};
      if (self.props.onDrop) {
        self.props.onDrop(newFile);
      }
    };

    reader.readAsDataURL(file);
  },

  render: function() {

    var className = 'dropzone';
    if (this.state.isDragActive) {
      className += ' active';
    };

    var style = {
      width: this.props.size || 100,
      height: this.props.size || 100,
      borderStyle: this.state.isDragActive ? 'solid' : 'dashed'
    };

    return (
      <div className={className} onClick={this.onClick} onDragLeave={this.onDragLeave} onDragOver={this.onDragOver} onDrop={this.onDrop}>
        <input style={{display: 'none' }} type='file' multiple ref='fileInput' onChange={this.onDrop} />
        {this.props.children}
      </div>
    );
  }

});

module.exports = Dropzone

使用Dropzone。

    <Dropzone onDrop={this.onAddFile}>
      <p>Drag &amp; drop files here or click here to browse for files.</p>
    </Dropzone>

将文件添加到拖放区后，将其添加到要上传的文件列表中。我将它添加到我的助焊剂商店。

  onAddFile: function(res){
    var newFile = {
      id:uuid(),
      name:res.file.name,
      size: res.file.size,
      altText:'',
      caption: '',
      file:res.file,
      url:res.imageUrl
    };
    this.executeAction(newImageAction, newFile);
  }

您可以使用 imageUrl 显示文件的预览。

  <img ref="img" src={this.state.imageUrl} width="120" height="120"/>

要上传文件，请获取文件列表并通过 superagent 发送它们。我正在使用通量，所以我从该商店获取图像列表。

  request = require('superagent-bluebird-promise')
  Promise = require('bluebird')

    upload: function(){
      var images = this.getStore(ProductsStore).getNewImages();
      var csrf = this.getStore(ApplicationStore).token;
      var url = '/images/upload';
      var requests = [];
      var promise;
      var self = this;
      _.each(images, function(img){

        if(!img.name || img.name.length == 0) return;

        promise = request
          .post(url)
          .field('name', img.name)
          .field('altText', img.altText)
          .field('caption', img.caption)
          .field('size', img.size)
          .attach('image', img.file, img.file.name)
          .set('Accept', 'application/json')
          .set('x-csrf-token', csrf)
          .on('progress', function(e) {
            console.log('Percentage done: ', e.percent);
          })
          .promise()
          .then(function(res){
            var newImg = res.body.result;
            newImg.id = img.id;
            self.executeAction(savedNewImageAction, newImg);
          })
          .catch(function(err){
            self.executeAction(savedNewImageErrorAction, err.res.body.errors);
          });
        requests.push(promise);
      });

      Promise
        .all(requests)
        .then(function(){
          console.log('all done');
        })
        .catch(function(){
          console.log('done with errors');
        });
    }

【讨论】：

this.executeAction(newImageAction, newFile); 在做什么？ newImageAction 不应该被什么东西代替吗？另外，最终的代码块应该放在哪里 - 在 Dropzone 组件中还是在 Store 中？
@frogbandit this.executeAction() 来自 Yahoo 的 Fluxible 框架。 fluxible.io - 你指的是什么最终代码块？
@JoeMcBride 明白了。它应该做什么？它总是给我newImageAction is not defined
我所指的代码块（我的部分问题）是从request = require('superagent-bluebird-promise') 向下的所有内容。
@frogbandit 第二个代码块是使用superagent 将图像列表上传到服务器的示例代码。 newImageAction 是一个通量动作。除非您使用fluxible，否则您不必使用executeAction。你可以使用创建的对象newFile，然后用它做任何你想做的事情。

【解决方案2】：

这可能会有所帮助

var FormUpload = React.createClass({
    uploadFile: function (e) {
        var fd = new FormData();    
        fd.append('file', this.refs.file.getDOMNode().files[0]);

        $.ajax({
            url: 'http://localhost:51218/api/Values/UploadFile',
            data: fd,
            processData: false,
            contentType: false,
            type: 'POST',
            success: function(data){
                alert(data);
            } 
        });
        e.preventDefault()
    },
    render: function() {
        return (
            <div>                
               <form ref="uploadForm" className="uploader" encType="multipart/form-data" >
                   <input ref="file" type="file" name="file" className="upload-file"/>
                   <input type="button" ref="button" value="Upload" onClick={this.uploadFile} />
               </form>                
            </div>
        );
    }
});

从这里借来How to send FormData objects with Ajax-requests in jQuery?

【讨论】：

这太棒了！在我能想到的所有浏览器上都能完美运行。谢谢！
从 React 0.14 "this.refs.file" 是 DOM 节点，所以 getDOMNode 已被弃用。 fd.append 行变为： fd.append('file', this.refs.file.files[0]);

【解决方案3】：

我面临的任务是获得类似于 facebook 或 gmail 的行为，一旦用户开始将文件拖到窗口上的任何位置，您的放置目标就会突出显示。我找不到现成的 React 拖放解决方案。所以，我做了一个。

它是简单的，为您提供一个基础来定制和设计您自己的样式。它提供了许多钩子来使您能够做到这一点。但也有一个演示，可以为您提供一个示例。

查看：https://www.npmjs.com/package/react-file-drop

演示：http://sarink.github.io/react-file-drop/demo/

【讨论】：

@KabirSarin react-file-drop 有文件删除功能？
@KabirSarin 也可以自定义我想接受的文件类型吗？

【解决方案4】：

这个https://www.npmjs.com/package/react-dropzone有一个 Dropzone npm 包

【讨论】：

okonet.ru/react-dropzone 只接受图片？我需要指定类型的文件拖放。有可能吗？