在ExtJS 6中，第二个文件上传失败，在ExtJS 4中可用 [英] Second File Upload fails in ExtJS 6, works in ExtJS 4

问题描述

非常低级的文件上传:

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中并正确提交.

The first file upload works like a charm; the file is packed into the multipart/mime and submitted correctly.

由于文件未打包到哑剧中，因此从相同的文件上传字段中进行的第二次文件上传失败.

The second file upload from the very same file upload field fails, because the file is not packed into the mime.

如果我关闭窗口并再次打开它，则文件字段再次正常工作-对于一次上传，就是这样.

If I close the window and open it again, the file field is working again - for a single upload, that is.

文件输入字段的DOM差异告诉我们浏览器为何具有这种行为.首次上传文件后，<输入类型="file" 字段中的以下三个属性就神奇地丢失了:

The difference in DOM of the file input field tells us why the browser behaves like this. The following three attributes are magically missing from the <input type="file" field after the first file upload:

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

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

Now, this does not happen if I use the file upload field in the sencha docs. It doesn't happen with my code in ExtJS 4.2.2. But it does happen with ExtJS 6.0.1.

你不知道为什么，是吗?

You wouldn't know why, would you?

推荐答案

它是Sencha ExtJS 6 Framework中的错误.如果您在文件上传字段中提供 name 属性，则一切都会按预期进行.

It is a bug in Sencha ExtJS 6 Framework. Everything works as expected if you provide a name property to the file upload field.

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

这篇关于在ExtJS 6中，第二个文件上传失败，在ExtJS 4中可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！