整理 | MUI上传文件到服务器（multipart/form-data上传文件）

在大多数APP应用中，我们会发现其都有上传修改头像的功能，本次项目中我们使用了MUI框架进行开发APP，其中我们在上传头像等功能时，使用了H5+ API提供的Uploader进行文件上传。

Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据，数据格式符合Multipart/form-data规范，即rfc1867（Form-based File Upload in HTML）协议。——摘自官网

开发者设定从图库或拍照两种方式选择需要上传的图片，然后，前端代码中，首先需要新建上传任务，而扩展API需要在onPlusReady回调函数之后，在MUI中，我们将调用的扩展API放置在mui.plusReady()中。

mui.plusReady(function () {
 plus.uploader... 
});

接下来，我们需要创建上传任务，并配置正确的参数。

/** 
 * @description 创建上传任务
 * @param url 服务器文件管理系统地址
 * @param {options} 上传任务的参数，如请求类型，上传优先级等
 * @param {completedCB} 上传任务完成后回调函数，成功或失败都会触发
 * @return Upload 管理一个上传任务的Upload对象
 */ 
Upload plus.uploader.createUpload( url, options, completedCB );

var task = plus.uploader.createUpload(url, {
	method: 'POST',//网络请求类型,仅支持http协议的"POST"请求
	blocksize: 102400,//上传任务每次上传的文件块大小,单位为Byte(字节),默认102400
	priority: 0,//上传任务的优先级,数值越大优先级越高,默认为0
	timeout: 120s,//上传任务超时时间,单位为秒(s),默认120s,设置为0则表示永远不超时
	retry: 3,//上传任务重试次数,默认重试3次
	retryInterval: 30,//上传任务重试时间间隔,单位为秒(s),默认30s
}, function(t, status) {
	/**
	 * t是上传任务对象upload,可以通过t.*的方式来获取对象信息
	 * status上传结果状态码,未获取传值状态则其值为0,上传成功其值为200
	 * 可以在这儿进行上传完成后的相关跳转等操作
	 */
	console.log("上传任务的标识：" + t.id);
	console.log("上传文件的服务器地址：" + t.url);
	console.log("任务状态：" + t.state);
});

创建完上传任务后，我们需要对Upload对象进行相关参数的设置，如添加上传文件，添加上传数据等等。

/**
 * @description 向上传任务中添加文件，必须在上传任务开始上传前调用
 * @param {path} 添加上传文件的路径，仅支持本地路径
 * @param {options} 要添加上传文件的参数
 * @return {Boolean} 添加文件成功返回true，失败返回false 
 */
var addFileFlag = task.addFile('_www/demo.jpg', {
	key: 'file',//文件键名,默认为文件名称,唯一的,若存在相同的key则导致添加失败
	name: 'test',//文件名称,默认值为上传文件路径中的名称
	mime: 'image/jpeg'//上传文件的类型,默认值自动根据文件后缀名称生成
});
/**
 * @description 添加上传数据
 * @param {key} 添加上传数据的键名
 * @param {value} 添加上传数据的键值
 * @return {Boolean} 添加成功返回true，否则false
 */
var addDataFlag = task.addData('name', 'test');

这样一个简单的MUI创建上传任务，添加上传文件、数据已经完成，接着我们就要开始上传任务。

//一般我们会对添加文件/数据进行判断是否成功,若不成功则提示,成功后开始上传任务
if(addFileFlag) {
	task.start();
} else {
	plus.nativeUI.alert('添加上传文件失败！');
}
});

当然我们在实际项目中，上传文件是比较复杂的，比如我们需要能够中途暂停上传任务、恢复暂停的上传任务、取消上传任务等等。而本次项目中，我们上传头像仅仅是一个简单的功能，所以我们不需要复杂的控制，仅使用以上代码即可实现（服务器代码此处不做赘述）。