处理Extjs4 文件上传时若服务器出错带来的问题

一个典型的Extjs4上传文件表单：

Ext.define('org.allenz.UploadFormPanel', {
	extend : 'Ext.form.Panel',

	initComponent : function() {
		var states = Ext.create('Ext.data.Store', {
			fields : [ 'name', 'value' ],
			data : [ {
				name : '成功',
				value : 0
			}, {
				name : '失败',
				value : 1
			}, {
				name : '模拟服务器错误',
				value : 2
			} ]
		});

		var me = this;
		Ext.apply(me, {
			width : 300,
			height : 100,
			items : [ {
				xtype : 'filefield',
				fieldLabel : '上传文件',
				name : 'upload',
				buttonText : '浏览',
				allowBlank : false
			}, {
				xtype : 'combo',
				fieldLabel : '上传结果',
				name : 'state',
				allowBlank : false,
				store : states,
				displayField : 'name',
				valueField : 'value'
			} ],
			dockedItems : [ {
				xtype : 'toolbar',
				dock : 'bottom',
				ui : 'footer',
				items : [ '->', {
					text : '上传',
					scope : me,
					handler : me.onUpload
				} ]
			} ]
		});
		me.callParent(arguments);
	},

	onUpload : function() {
		var me = this;
		var form = me.getForm();
		if (!form.isValid()) {
			return;
		}
		// 浏览器提示
		Ext.Msg.show({
			msg : '正在上传...',
			width : 300,
			closable : false
		});
		form.submit({
			url : 'upload.do',
			scope : me,
			success : me.uploadSuccess,
			failure : me.uploadFailure
		});
	},

	uploadSuccess : function(form, action) {
		Ext.Msg.hide();
		Ext.Msg.alert('提示', '上传成功！');
	},

	uploadFailure : function(form, action) {
		Ext.Msg.hide();
		var errorText;
		switch (action.failureType) {
		case Ext.form.action.Action.CLIENT_INVALID:
			// 浏览器检查失败
			errorText = '请选择上传文件！';
			break;
		case Ext.form.action.Action.SERVER_INVALID:
			// 服务器检查文件失败
			errorText = action.result.errors[0].message;
			break;
		default:
			// 网络或服务器错误
			errorText = '因网络或服务器错误，上传失败！';
		}
		Ext.Msg.alert('错误', errorText);
	}
});

服务器端代码（基于Java Spring，只起返回作用不真正处理文件）：

@Controller
public class UploadTestController {

	@RequestMapping("/upload.do")
	void upload(HttpServletResponse response, int state) throws IOException {
		String result = null;
		switch (state) {
		case 0:
			result = "{success:true}";
			break;
		case 1:
			result = "{success:false,errors:[{message:'文件格式错误！'}]}";
			break;
		case 2:
			throw new RuntimeException("抛出异常");
		}
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		response.resetBuffer();
		PrintWriter out = response.getWriter();
		out.write(result);
		out.close();
	}
}

这里约定，服务器应返回的JSON字符串格式如下：
{success:boolean,errors:[{message:string}]}

在下拉框里选择“成功”或“失败”，上传文件后浏览器都能弹出对话框并显示信息，但是当选择'模拟服务器错误'后上传，浏览器并没有如我们预想那样提示“因网络或服务器错误，上传失败！”，而是在“正在上传...”提示中卡死，控制台提示“uncaught exception: You're trying to decode an invalid JSON String: ...”为什么会这样呢？

其实Ajax只能够收发基于文本的数据，是不能够处理二进制数据的。之所以看上去能够“异步上传”，是因为Extjs针对包含上传的表单使用了iframe提交的方法，流程如下：

1.在页面创建一个iframe和隐藏的form，form的各字段和Extjs表单字段相同；
2.将form的target指向该iframe，并监听iframe的onload事件；
3.提交这个form，待iframe的onload事件触发后（加载完成），读取iframe的innerHtml，并保存到responseText；
4.默认情况下，尝试将responseText进行JSON解码；
5.根据解码结果，调用success或failure回调。

隐患在第3步已经产生，因为不是使用Ajax提交，Extjs无法获取Http状态码，只能假定iframe返回的是JSON数据。而服务器出错时，返回的一般是Html错误页面，Extjs尝试对Html内容进行JSON解码最后抛出异常。

有没有办法处理这种情况呢？答案是有的。负责表单提交的Ext.form.Basic有一个参数errorReader，指定了errorReader时，解释responseText的责任就落到该数据读取器身上。在该数据读取器中先对responseText进行JSON解码测试，若发生异常，制造一个失败JSON对象。代码如下：

// 定义错误信息数据模型
Ext.define('org.allenz.ErrorModel', {
	extend : 'Ext.data.Model',

	fields : [ 'message' ]
});
// 定义上传错误数据读取器
Ext.define('org.allenz.UploadErrorReader', {
	extend : 'Ext.data.reader.Json',
	alternateClassName : 'Ext.data.UploadErrorReader',
	alias : 'reader.upload',

	// 设置错误信息根节点为errors
	root : 'errors',

	// 覆盖getResponseData
	getResponseData : function(response) {
		var data;
		try {
			// 尝试将responseText解码为JSON
			data = Ext.decode(response.responseText);
		} catch (ex) {
			// 不能解码，则服务器没有正常返回，制造一个包含错误信息的JSON对象
			// 最终这个data会被Reader转换为
			// result = {success : false, errors : [yourErrorModel]}
			// 从在回调函数中action.result读取
			data = {
				success : false,
				total : 1,
				errors : [ {
					message : '因网络或服务器错误，上传失败！'
				} ]
			};
		}

		return data;
	}
});

在Extjs表单类的initComponent函数末尾（执行this.callParent(arguments);后）加入：

var form = this.getForm();
		var errorReader = Ext.create('org.allenz.UploadErrorReader', {
			model : 'ErrorModel'
		});
		Ext.apply(form, {
			errorReader : errorReader
		});

注意返回数据格式要改为Reader能够辨认的格式，如{success:boolean,total:integer,errors:[yourErrorModel,...]}

评论

2 楼 xiaoyaozjl 2012-10-14  

王伟康 写道

文件上传成功，但还是报错， You're trying to decode an invalid JSON String:    这个问题怎样修改

上传处理完毕后，要主动在服务器端返回(在response中写入)Extjs4能处理的json才行，比如"{success:true}"

1 楼 王伟康 2012-09-12  

文件上传成功，但还是报错， You're trying to decode an invalid JSON String:    这个问题怎样修改