在Extjs Ajax请求中未获取文件数据

Question

我在表单窗口上有一个表单，在表单窗口内有一个包含多个字段和一个上传按钮的表单。当尝试使用Ajax.request提交表单时，我得到了文本字段值，但无法获得文件数据。除了文件名。

var fd = Ext.getCmp('users-form').form;
var fileInput = document.getElementById('company_logo');
console.log(fd.getEl().dom.files);
params = {
name            : fd.findField('name').getValue(),
login           : fd.findField('login').getValue(),
email           : fd.findField('email').getValue(),
password        : fd.findField('password').getValue(),
password_repeat : fd.findField('password_repeat').getValue(),
id              : fd.findField('id').getValue()
company_logo    : fd.findField('logo').getValue()
}
console.log(params);
Ext.Ajax.request({
url: Scada.reqUrl('users', 'save'),
method: 'post',
params: {
data: Ext.encode(params)
},
success: function() {
console.log('in success');
},
failure: function() {
console.log('in failure');
}
});

这里的徽标是输入类型文件。我想用ajax请求发送徽标数据。请帮我解决这个问题。感谢

Answer 1

不确定为什么在Extjs form Submit中fileupload为true时开始了一个新问题，而不是编辑Encode表单数据，因为这似乎是同一个问题。

假设logo是您的文件上传字段，您试图使用getValue获取文件数据，但实际上并没有返回文件内容(如果您使用现代方法，则有一个getFiles方法可以返回选定的文件对象(。

您的方法的一般问题：正如我在最初的回答中所说，以标准ajax请求发送文件不是一个好主意。在你的情况下，这些问题是：

• 如果希望getValue返回文件内容，则可能会将二进制数据编码为JSON字符串。这可能会起作用，但会产生很大的开销，因为唯一可用的JSON数据类型是string，所以解析器必须猜测属性company_logo包含二进制数据，并且需要以某种方式转换为某种文件引用
• 您发送的文件没有元数据，因此在将原始内容添加到JSON字符串中时，如果不以多种方式测试文件，您将无法检测到预期的文件类型
• 据我所知，你根本无法访问经典工具包中的文件内容

以表单形式提交数据：在最初的问题中，您解释了提交表单而不是执行Ajax请求，这通常是首选方式。当您提交包含文件上传字段的表单时，表单将自动以multipart/form-data的形式提交，原始文件将与原始内容一起添加到请求主体中，同时保留浏览器收集的元数据。

如果你看https://docs.sencha.com/extjs/7.0.0/modern/Ext.Ajax.html#method-请求时，您必须将isUpload设置为true，并使用formproeprty而不是params，从而传递对父窗体的引用。