javascript - 第二个文件上传在 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" 神奇地缺少以下三个属性第一个文件上传后的字段:

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

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

你不会知道为什么吧？

Answer 1

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

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