Ext.define('test.view.uploadtest.main', {
extend:'Ext.panel.Panel',
xtype:'uploadtest',
items: [{
xtype:'form',
title:'upload test',
width:360,
layout:'vbox',
items: [{
xtype:'filefield',
width:'100%',
name:'logfile',
id:'logfile',
}, {
xtype:'button',
width:45,
text:'上传文件',
listeners: {
click:function (btn,e,opts) {
fileEl = Ext.getCmp('logfile').fileInputEl.dom;
var fd =new FormData();
fd.append('logfile',fileEl.files[0]);
Ext.Ajax.request({
url:'http://192.168.21.101/u.php',
cors:true,
useDefaultXhrHeader:false,
method:'post',
rawData:fd,
headers: {
"Content-Type":null /* 最重要的部分,将Content-Type设置成null,ExtJs则会由内部的XMLHTTPRequest自动生成包含boundary的Content-Type,否则在使用rawData的情况下,ExtJs会将Content-Type设置成text/plain */
},
success:function (res,opts) {
alert('success');
},
failure:function (res,opts) {
alert('failure');
}
});
}
}
}]
}]
});
以上是可以跨域上传文件的代码,关键地方做了标注。
以下是太长不看版:
刚开始的时候,我使用form的submit来提交文件:
btn.up('form').getForm().submit({
url:'http://192.168.21.101/u.php',
cors: true,
useDefaultXhrHeader:false,
success:function(form,action){
alert('success');
},
failure:function(form,action){
alert('failure');
}
});
发现每次执行都是failure,再查看failure事件中的action.response可以看到:
responseText:"{success:false,message:"Blocked a frame with origin "http://localhost:1841" from accessing a cross-origin frame."}"
responseXML:null
status:400
statusText:"Blocked a frame with origin "http://localhost:1841" from accessing a cross-origin frame."
由于跨域,即使上传文件的请求成功,也会由于浏览器的拦截导致失败。既然form的submit方法不支持跨域,那就改用ajax+formdata来请求,在ExtJs中formdata需要使用到rawData属性来发送:
fileEl = Ext.getCmp('logfile').fileInputEl.dom;
var fd =newFormData();
fd.append('logfile',fileEl.files[0]);
Ext.Ajax.request({
url: 'http://192.168.21.101/u.php',
cors: true,
useDefaultXhrHeader: false,
method: 'post',
rawData: fd,
success: function (res,opts) {
alert('success');
},
failure: function (res,opts) {
alert('failure');
}
});
运行时,所有的请求都从success的事件中返回了,然而服务器并没有正确接收到文件,查看网络抓包发现了问题的所在,这个是请求的HTTP头部:
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4
Connection:keep-alive
Content-Length:621
Content-Type:text/plain <-------------------错误的Content-Type将导致服务器无法正确解析参数
Host:192.168.21.101
Origin:http://localhost:1841
Referer:http://localhost:1841/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
注意看Content-Type的地方,这个请求的Content-Type是text/plain,而传输文件的时候,数据是通过multipart/form-data的格式来传输
------WebKitFormBoundaryBKkxWkenCjSNoZr0
Content-Disposition: form-data; name="logfile"; filename="b.txt"
Content-Type: text/plain
------WebKitFormBoundaryBKkxWkenCjSNoZr0--
这就解释了为什么服务器无法正确处理数据,根据rfc1867协议中的规定,当使用表单上传文件的时候,需要使用multipart/form-data的格式进行编码,并且在http的头部中,设置Content-Type为multipart/form-data,并且使用负载数据中不会出现的字符串,作为boundary用于字段之间进行分割。正确的Content-Type应该是:
Content-Type:multipart/form-data; boundary=AaB03x
然而当我使用headers属性手动设置Content-Type的时候出现了一个无奈的问题:boundary不能手动设置。
我尝试了两种方法,
1.不手动加boundary
Ext.Ajax.request({
url: 'http://192.168.21.101/u.php',
cors: true,
useDefaultXhrHeader: false,
method: 'post',
rawData: fd,
headers:{
'Content-Type':'multipart/form-data'
},
success: function (res,opts) {
alert('success');
},
failure: function (res,opts) {
alert('failure');
}
});
那最后执行请求时,http头部的Content-Type将不包含boundary信息,服务器仍然无法正确解析数据:
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4
Connection:keep-alive
Content-Length:621
Content-Type:multipart/form-data <------------------注意这行,不包含boundary信息
Host:192.168.21.101
Origin:http://localhost:1841
Referer:http://localhost:1841/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
2.手动加上boundary:
Ext.Ajax.request({
url: 'http://192.168.21.101/u.php',
cors: true,
useDefaultXhrHeader: false,
method: 'post',
rawData: fd,
headers:{
'Content-Type':'multipart/form-data; boundary=----fortestboundaryAaSsCdes'
},
success: function (res,opts) {
alert('success');
},
failure: function (res,opts) {
alert('failure');
}
});
发现请求的Http头部中的boundary和内容中的boundary不一致:
Accept:*/*
Accept-Encoding:gzip, deflate
Accept-Language:en-US,en;q=0.8,zh-CN;q=0.6,zh;q=0.4
Connection:keep-alive
Content-Length:621
Content-Type:multipart/form-data; boundary=----fortestboundaryAaSsCdes <------Content-Type中已经有了我们手动设置的boundary
Host:192.168.21.101
Origin:http://localhost:1841
Referer:http://localhost:1841/
User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36
然而内容中的boundary仍然是浏览器自己生成的:
------WebKitFormBoundarycWsyuhDfyRmYp8dZ
Content-Disposition: form-data; name="logfile"; filename="b.txt"
Content-Type: text/plain
------WebKitFormBoundarycWsyuhDfyRmYp8dZ--
这个意味着boundary必须由浏览器生成,那么我们就不能手动设置Content-Type,但是不设置Content-Type,ExtJs会自己设置Content-Type为text/plain,问题似乎陷入了死胡同。
我相信问题必定有解决的方法,最糟糕的情况不过于需要修改ExtJs的源码,然而当我仔细阅读这部分的源码的时候,发现ExtJs还是留了一道后门给我们,解决这个问题的关键就在Ext.data.request.Ajax这个类的setupHeaders中:
setupHeaders:function(xhr,options,data,params) {
var me = this,
// 当Ajax.request中的参数对象有headers这个参数的时候,headers使用传入的参数
// 注意type在这个地方是'Content-Type'
headers = Ext.apply({}, options.headers || {}, me.defaultHeaders), type = 'Content-Type',
...
// 接下来ExtJs检查了headers中间是否设置了'Content-Type'这个属性,如果没有设置
// 并且使用了rawData、xmlData和jsonData中的一个,则将设置默认的Content-Type
if (!headers.hasOwnProperty(type) && (data ||params)) {
if (data) {
if (options.rawData) {
// 这个地方可以看到,当使用rawData时,Content-Type将被默认设置成'text/plain'
// 这个和我们之前测试代码的运行结果是一致的
contentType ='text/plain';
}
else {
if (xmlData &&Ext.isDefined(xmlData)) {
contentType ='text/xml';
}
else if (jsonData && Ext.isDefined(jsonData)) {
contentType ='application/json';
}
}
}
headers[type] =contentType;
}
...
// 最关键的代码出现在这个地方,如果headers['Content-Type']没有定义,或者设置为null
// 那么这个属性将会从headers里删去
if (headers[type] ===undefined ||headers[type] ===null) {
delete headers[type];
}
try {
// 删去之后,ExtJs将不会再设置Content-Type,而是让XMLHTTPRequest自己决定Content-Type的内容
// 这个正是我们所需要的
for (key in headers) {
if (headers.hasOwnProperty(key)) {
header = headers[key]; xhr.setRequestHeader(key,header);
}
}
}
...
return headers;
},
这份代码中我隐藏了部分不太相关的代码,分析了相关代码,我们发现,只需要在headers属性中设置'Content-Type'为null,那么ExtJs在发送rawData时,也不会自己去设置Content-Type为'text/plain'。
既然这样,我把上面通过ExtJs的ajax发送数据的代码稍作修改:
Ext.Ajax.request({
url: 'http://192.168.21.101/u.php',
cors: true,
useDefaultXhrHeader: false,
method: 'post',
rawData: fd,
headers:{
'Content-Type':null
},
success: function (res,opts) {
alert('success');
},
failure: function (res,opts) {
alert('failure');
}
});
测试运行正常,服务器也可以正确获取文件信息,问题得到解决。