在大多数APP应用中，我们会发现其都有上传修改头像的功能，本次项目中我们使用了MUI框架进行开发APP，其中我们在上传头像等功能时，使用了H5 API提供的Uploader进行文件上传，接下来我们就来聊聊关于mui教程入门?以下内容大家不妨参考一二希望能帮到您!
mui教程入门
在大多数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('添加上传文件失败！'); } });
当然我们在实际项目中，上传文件是比较复杂的，比如我们需要能够中途暂停上传任务、恢复暂停的上传任务、取消上传任务等等。而本次项目中，我们上传头像仅仅是一个简单的功能，所以我们不需要复杂的控制，仅使用以上代码即可实现（服务器代码此处不做赘述）。
,
