在ExtJS 6中，第二个文件上传失败，在ExtJS 4中可用

Question

底层文件上传：

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'form',
        items: [{
            xtype: 'filefield',
            fieldLabel: 'Select file',
            listeners: {
                change: {
                    fn: me.onFilefieldChange,
                    scope: me
                }
            }
        }]
    },{

...

onFilefieldChange: function(filefield, value, eOpts) {
    var form = filefield.up('form').getForm();
    form.submit({
        url: APIURI+'FileUpload',
        headers: {'Accept':'application/json','Content-Type':'application/json'},
        waitMsg: 'Uploading',
        success: function(fp, o) {
            var filedata = Ext.decode(o.response.responseText).data;
            var rec = Ext.create("MyApp.model.FileModel",filedata);
            Ext.getStore("FileStore").add(rec);
        },
        failure: function(fp, o) {
            Ext.alert("ERROR", "File save failed"));
        }
    });

第一次上传文件就像一个超级按钮。 该文件被打包到multipart / mime中并正确提交。

从完全相同的文件上载字段中进行的第二个文件上载失败，因为该文件未打包到mime中。

如果我关闭窗口并再次打开它，则文件字段将再次起作用-即一次上传。

文件输入字段的DOM差异告诉我们浏览器为什么会这样。 首次上传<input type="file"后， <input type="file"字段中就缺少以下三个属性：

data-ref=​"fileInputEl"
name=​"filefield-1333-button"
data-componentid=​"filefield-1333-button"

现在，如果我使用sencha docs中的文件上传字段，则不会发生这种情况。 ExtJS 4.2.2中的代码不会发生这种情况。 但这确实发生在ExtJS 6.0.1中。

你不知道为什么，会吗？

Answer 1

这是Sencha ExtJS 6 Framework中的错误。 如果您为文件上传字段提供name属性，那么一切都会按预期进行。

xtype: 'filefield',
fieldLabel: 'Select file',
name: 'RequiredSenchaBugWorkaround',
...

Answer 2

添加名称并非总是可行。 它在Ext 6.2中仍然存在问题。 除此之外，你应该做

FileInputField1.reset();

这样可确保该字段已重置，并允许您再次上载相同的文件。