在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();

這樣可確保該字段已重置，並允許您再次上載相同的文件。