在大多数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 );
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
*/
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('添加上传文件失败！');
}
当然我们在实际项目中，上传文件是比较复杂的，比如我们需要能够中途暂停上传任务、恢复暂停的上传任务、取消上传任务等等。而本次项目中，我们上传头像仅仅是一个简单的功能，所以我们不需要复杂的控制，仅使用以上代码即可实现（服务器代码此处不做赘述）。
网友评论