mui上传图片PHP处理,整理 | MUI中使用Uploader上传文件

在大多数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('添加上传文件失败！');

}

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