使用ReactJS上传文件组件
使用ReactJS上传文件组件
提问于 2015-02-27 02:53:41
我一直在到处寻找有关制作组件的帮助，以帮助管理从React中上传文件到我设置的端点。
我尝试过很多方法，包括集成filedropjs。我决定不使用它，因为我无法控制它使用new FileDrop('zone', options);在DOM中设置的元素
这就是我到目前为止所知道的：
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>
);
}
}
});如果有人能给我指出正确的方向，我会给你一些虚拟的拥抱。我已经在这方面做了相当广泛的工作。我觉得我已经很接近了，但还不够。
谢谢!
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-03-05 00:53:22
我也在这方面工作了很长一段时间。这就是我想出来的。
一个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>将文件添加到拖放区域后，将其添加到要上载的文件列表中。我将其添加到我的flux存储中。
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发送它们。我使用flux，因此我从该商店获得了图像列表。
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');
});
}Stack Overflow用户
发布于 2015-03-03 22:28:37
这可能会有所帮助
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?
Stack Overflow用户
发布于 2015-10-09 12:25:18
我面临的任务是获得类似facebook或gmail的行为，即用户一开始将文件拖到窗口上的任何位置，您的拖放目标就会突出显示。我找不到现成的React拖放解决方案。所以，我做了一个。
它应该是最基本的，它为你提供了一个基础，让你可以按照自己的风格进行定制。它提供了许多钩子来使您能够做到这一点。但也有一个演示，它提供了一个示例，供您参考。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28750489
复制相关文章
相似问题