我有一个表单来添加用户和外部的上传字段(dropzone.js)来管理用户的头像图像。
如果表单处于编辑模式,我知道用户的id,这样我就可以管理头像;但是如果我想添加一个用户,我没有id来绑定一个图像到新用户。
实际上,我在插入模式中使用这种方法:
- 我将图片上传到服务器;
- 服务器返回文件名;
- 当提交按钮被按下以保存用户时,我在post请求中添加文件名。
其他解决方案可以是:
- 创建一个预览和计算图像的base64与dropzone并将其发送到服务器(但我不知道如何实现这个解决方案);
- 在插入模式下禁用上传字段,只在编辑模式下启用模式。
有更好的解决方案吗?
编辑1:这是我的代码
var ModalAvatar = React.createClass({
propTypes: {
isActive : React.PropTypes.bool.isRequired,
onChange : React.PropTypes.func.isRequired
},
componentDidMount: function() {
var self = this;
Dropzone.autoDiscover = false;
this.dropzone = new Dropzone('#demo-upload', {
parallelUploads: 1,
thumbnailHeight: 120,
thumbnailWidth: 120,
maxFilesize: 3,
filesizeBase: 1000,
});
this.dropzone.on("addedfile", function(file){
// How I could read the added file by $_FILES?
var url = URL.createObjectURL(file);
var formData = new FormData();
formData.append("avatarFile", file);
self.props.onChange("avatarFile", formData);
});
// Now fake the file upload (I took this from dropzone.js)
var minSteps = 6,
maxSteps = 60,
timeBetweenSteps = 100,
bytesPerStep = 100000;
this.dropzone.uploadFiles = function(files) {
var self = this;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var totalSteps = Math.round(Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep)));
for (var step = 0; step < totalSteps; step++) {
var duration = timeBetweenSteps * (step + 1);
setTimeout(function(file, totalSteps, step) {
return function() {
file.upload = {
progress: 100 * (step + 1) / totalSteps,
total: file.size,
bytesSent: (step + 1) * file.size / totalSteps
};
self.emit('uploadprogress', file, file.upload.progress, file.upload.bytesSent);
if (file.upload.progress == 100) {
file.status = Dropzone.SUCCESS;
self.emit("success", file, 'success', null);
self.emit("complete", file);
self.processQueue();
}
};
}(file, totalSteps, step), duration);
}
}
}
this.toggle(this.props.isActive);
},
render: function(){
return (
<form action="/upload" className="dropzone needsclick dz-clickable" id="demo-upload">
<div className="dz-message needsclick">
Drop files here or click to upload.
</div>
</form>
)
}
});
var User = React.createClass({
getInitialState: function(){
return {
isActive : false
}
},
onChange: function(formData){
this.setState({
avatarImg: formData
});
},
openModal: function(){
this.setState({
isActive: true
});
},
render: function(){
var model = {
id : this.state.id,
avatarImg : this.state.avatarImg
};
return (
<div className="user">
<div className="user-avatar" onClick={this.openModal}><img src="path"></div>
<Form model={model} onSuccess={this.onSuccess}>
<FieldName value={name} />
<FieldEmail value={email} />
</Form>
<ModalAvatar
isActive={this.state.isActive}
onChange={this.onChange} />
</div>
)
}
});
在User
组件中,我有一个表单来添加姓名,电子邮件等,另一个div .user-avatar
来显示用户的头像和打开模式来更改它。
我的想法是模拟在dropzone中上传,并使用"addedfile"事件转换file
参数,我可以在php中使用$_FILES读取,但该代码$_FILES为空。我错了吗?
如果用户还没有注册,我认为你不应该允许用户上传图片。只有当你有用户要做的时候,你才应该分配/上传图片。
所以这意味着如果没有用户本身或足够的数据来创建用户,就不能访问服务器。您可以在创建时进行预览,而不必使用base64。读一下"Javascript上传图像"。您可以简单地使用URL.createObjectURL()
或简单地将文件引用传递给表单data
除非您有理由在用户选择映像后立即备份该映像。不要使用服务器,如果我取消了用户的创建怎么办?你有一张没人用的照片吗?你会开始使用TTL之类的东西吗?而已。当涉及到服务器时,要偷懒。为了你和客户好