用ReactJS上传文件组件
我一直在寻找帮助，使一个组件帮助pipe理上传文件从React到我设置的端点。
我已经尝试了很多选项，包括整合http://filedropjs.org 。 我决定反对它，因为我没有控制它在DOM中使用new FileDrop('zone', options);设置的元素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> ); } } });
如果有人能指出我正确的方向，我会发送一些虚拟的拥抱。 我一直在相当广泛的工作。 我觉得我很接近，但不是那样。
谢谢！
我也在这方面工作了一段时间。 这是我想出来的。
一个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 & 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 = 'http://img.dovov.comupload'; 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'); }); }
这可能有帮助
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> ); } });
从这里借用如何发送FormData对象与jQuery的Ajax请求？
当用户开始在窗口上的任何位置拖动文件时，我正面临着获取Facebook或类似gmail的行为的任务。 没有现成的React拖放解决scheme，我可以find。 所以，我做了一个。
这意味着它们将成为您的基础，为您提供定制和风格的基础。 它提供了许多挂钩，使您能够做到这一点。 但是也有一个演示给你一个例子。
检查出来： https ： //www.npmjs.com/package/react-file-drop
演示： http : //sarink.github.io/react-file-drop/demo/
