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

Question

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

如果表单处于编辑模式，则我知道用户的ID，因此我可以管理该头像； 但是，如果要添加用户，则没有ID将图像绑定到新用户。

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

1. 我将图像上传到服务器上；
2. 服务器返回文件名；
3. 当按下提交按钮以保存用户时，我将文件名添加到发布请求中。

其他解决方案可能是：

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

有更好的解决方案吗？

编辑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中上载，并使用$ _FILES在php中读取的东西中带有“ addedfile”事件转换file参数，但使用该代码$ _FILES为空。 我怎么了

Answer 1

我不认为如果用户仍未注册，则不应该允许该用户上传图像。.仅当有用户需要时，才应该分配/上传图像。

因此，这意味着在没有用户本身或没有足够的数据来创建用户的情况下，您不会接近服务器。 您可以允许预览创建的内容，而不必使用base64。 阅读有关“ Javascript上传图像”的信息。 您可以简单地使用URL.createObjectURL()或简单地将文件引用传递给表单数据

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