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

Question

我有文件上传控件，我使用它在服务器上上传图像文件。在此操作中，我将提交两次表单。问题是，在第一次提交表单后，文件上传文件在第二次提交时给出了 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.userPhoto 的事件）此表单提交方法我用于在服务器端保存临时文件。接下来，我将在第二次提交时保存相同的文件和其他用户详细信息，但在第二次提交时，我没有从 This.userPhoto 中得到任何信息。请看下面的屏幕截图，您可以对此有更好的了解。

在图像中你可以看到有 BROWSE 和 SAVE 按钮第一个表单提交方法在 select 文件之后完成，第二个表单提交方法在单击“保存”按钮时完成。

Answer 1

sencha 文件上传字段无法保留其状态，因为基础 HTML 字段是一个文件上传字段，其目的不是在提交表单时保持其状态。

在您的表单中使用文件上传字段时存在很多缺点，因此我已改用其他方法上传图片。

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

这样，

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

主要缺点是图片通过网络传输的次数比简单的文件上传要多，但至少对我来说，这是个小问题。

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

How to maintain state of file field in ExtJs

html

javascript

extjs

extjs4.2

extjs5