Question

我有一个表单可以添加用户，在其外面有一个上传字段（dropzone.js）来管理用户的头像图像。

如果表单处于编辑模式，我知道用户的ID，所以我可以管理头像;但如果我想添加一个用户，我没有id将图像绑定到新用户。

实际上，我在插入模式下使用这种方法：

我在服务器上传图像;
服务器返回文件名;
按下提交按钮以保存用户时，我在帖子请求中添加文件名。

其他解决方案可能是：

创建预览并使用dropzone计算图像的base64并将其发送到服务器（但我不知道如何实现此解决方案）;
在插入模式下禁用上传字段并仅在编辑时启用它模式。

有更好的解决方案吗？

编辑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为空。我错了什么？

Answer 1

如果他还没有注册，我认为你不应该允许用户上传图片。只有当你有用户做的时候才应该分配/上传图片。

因此，这意味着如果没有用户本身或足够的数据来创建用户，您就不会接近服务器。您可以允许预览创建，而不必使用base64。阅读它，“Javascript上传图片”。您只需使用URL.createObjectURL()或只是将文件引用传递给form data

即可

除非您有理由在用户选择图像后立即备份图像。不要使用服务器，如果我取消了用户的creatino怎么办？你有一张没有用过的照片吗？你会开始使用TTL和类似的东西吗？只是。谈到服务器时要懒惰。为了您的利益和客户。在你真正需要的时候使用它。

React和Dropzone.js：以“插入模式”上传图片

1 个答案: