第二次文件上传在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"));
        }
    });

第一个文件上传就像一个魅力；该文件被打包到多部分/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框架中的一个bug。如果您向文件上载字段提供了name属性，则一切都按预期的方式工作。

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

Answer 2

添加名称并不总是有效的。Ext6.2中仍然存在问题。除此之外，你还应该

FileInputField1.reset();

这将确保该字段被重置，并允许您再次上传相同的文件。