如何在 ExtJs 中维护文件字段的状态答案

【问题标题】：How to maintain state of file field in ExtJs如何在 ExtJs 中维护文件字段的状态
【发布时间】：2017-09-12 06:32:25
【问题描述】：

我有文件上传控制，我使用它在服务器上上传图像文件。在此操作中，我将提交两次表单。问题是，在提交表单第一次文件上传提交后，在第二次提交时给出 null 值。让我们看看我的代码如下。

this.userPhoto = new Ext.create('Ext.form.field.File', {
        xtype: 'filefield',
        padding: '5 5 5',
        cls: 'p-photo-upload',
        emptyText: 'Photo',
        buttonOnly: true,
        fieldLabel: fleet.Language.get('_FLEET_USER_USERDETAIL_PHOTO_'),
        name: 'photo',
        labelWidth: 200,
        width: '26%',
        msgTarget: 'under',
        listeners: {
            scope: this,
             change: function (t, value) {
                var data = {};
                data.userPhoto = t.value;
                data.imageType = 'userPhoto';
                var postdata = Ext.encode(data);
                postdata = Base64.encode(postdata);
                this.UserDetailform.getForm().submit({
                    scope: this,
                    url: FLEET_PROXY_URL + 'index.php?c=user&a=uploadphoto',
                    params: { postData: postdata },
                    success: function (form, action) {
                        this.setLoading(false);
                        var b = Ext.decode(action.response.responseText);
                        console.log(b);
                        if (b && b.data && b.success === "S") {
                            var img = '<img src="' + FLEET_SERVER_URL + 'images/temporary/' + b.data.photoname + '" />';
                            this.userimage.setValue(img);
                        } else {
                            this.UserDetailform.getForm().findField('photo').markInvalid(fleet.Language.get(b.errors[0].photo));
                        }
                    }
                });
            } 
        }
    });

this.userPhoto 是 Ext.form.field.File 的对象，浏览文件后我通过提交表单上传它（你可以在 this 的监听器 change 事件中看到代码.userPhoto）这个表单提交方法我用于在服务器端保存临时文件。接下来，我将在第二次提交时保存相同的文件和其他用户详细信息，但在第二次提交时，我没有从 This.userPhoto 中得到任何信息。请参阅下面的屏幕截图，您可以对此有更好的了解。

在图片中你可以看到有BROWSE和SAVE按钮选择文件后完成第一个表单提交方法，然后单击保存按钮。

【问题讨论】：

标签： javascript html extjs extjs4.2 extjs5

【解决方案1】：

sencha 文件上传字段无法保持其状态，因为底层 HTML 字段是一个文件上传字段，它不打算在提交表单时保持其状态。

在表单中使用文件上传字段时有很多缺点，我已切换到不同的图片上传方法。

在我的应用程序中，需要上传图片，文件上传字段并没有连接到实际的表单，而是自己提交，然后后端将图片的data URL返回给客户端。然后，客户端通常将此数据 URL 放入表单中的隐藏字段中。绑定到隐藏字段的xtype:'image'，在前端显示隐藏字段（=图像）的内容。

这样，

数据 URL 可以更容易地在数据库中处理，因为它是“可读”字符串，而不是 blob，
数据 URL 与表单中的所有其他数据一起加载并保存，
数据URL可以无限频繁地加载和保存，
我只需要一个处理图像上传的后端端点，并且可以从那里处理数据 URL（字符串），
所有表单都可以作为 JSON 提交（文件上传字段强制执行标准提交，因此当将文件上传字段添加到现有表单时，我将不得不丢弃我已经为该端点拥有的所有后端代码）。

主要缺点是图像通过网络传输的频率高于简单的文件上传，但至少对我来说，这是一个小问题。

【讨论】：