MUI之Plus篇（移动端头像上传功能）

前言
        MUI框架适合做移动端开发，相对于Element-ui来说，MUI可以调用手机底层接口，如调用手机摄像头、相册等功能。
        plus是H5+APP调用手机接口的一个重要组成部分，使用plus的时候一定要记住，只有plusReady准备好的前提下才能使用plus，使用如下：
        调用手机相册，然后创建上传信息进行图片上传功能：
        对于HTML5+应用的页面有一个很重要的“plurReady”事件，此事件会在页面加载后触发，表示所有HTML5+API都可以使用，在此事件出发之前不能调用HTML5+API，所以应该再次事件回调函数中调用初始化需要调用的HML5+API。点击查看H5+API官方文档

调用H5+API进行移动端头像上传

        经过查看H5+API官方文档发现，移动端上传图片文件大致需要两个步骤，第一步是调用图片的API——Gallery，第二步是调用创建上传任务的一个API——Uploader。
        Gallery：Gallery模块管理系统相册，支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。

        Uploader：Uploader模块管理网络上传任务，用于从本地上传各种文件到服务器，并支持跨域访问操作。

        注：plus报错不用在意，测试阶段，plus代码不能在浏览器上进行测试，会报plus未定义的异常

export default{
	name:'',
	create(){
		this.$mui.init();
		if(windows.plus){//准备plusready
			this.plusReady();
		}else {
			document.addEventListener("plusready",this.plusReady,false);
		}
	},
	methods:{
		plusReady(){
		
		},
		//文件上传
	      createUpload(path) {
	        let _this=this;
	        //上传时的请求路径
	        var task = plus.uploader.createUpload( "http://192.168.191.3:8081/toUploadAvatar?id="+this.user.id,
	          { method:"POST",blocksize:20480000,priority:100 ,retry:0},//一定要用 POST 请求
	          function ( t, status ) {//上传完成之后会调用该方法，不管上传成功与否，都会调用，此方法不是必选，可以不写
	            // 上传完成
	            if ( status == 200 ) {
	              alert( "Upload success: " + t.url );
	              _this.setUserAvatar();
	            } else {
	              alert( "Upload faile: " + status );
	            }
	          }
	        );
	        plus.uploader.clear( task.state );//清除上传任务
	        alert("这是图片路径"+path+"_状态:");
	        //请参考官方文档，试了半天才试出来，，，，
	        //这块我没怎么弄不明白，有没有大佬知道的，指点一二哈哈哈~~~
	        task.addFile(path , {key:"file"} );
	        task.addData( "file", "avatar7" );
	        // task.addEventListener( "statechanged", this.onStateChanged, false );
	        task.start();//开始上传
	      },
	      //调用相册
	      galleryImg() {
	        // 从相册中选择图片
	        let _this = this;
	        console.log("从相册中选择图片:");
	        plus.gallery.pick( function(path){
	        //返回的相册绝对路径path
	        //调用创建上传功能进行图片上传
	          _this.createUpload(path);
	        }, function ( e ) {
	          console.log( "取消选择图片" );
	        }, {filter:"image"} );
	      },
		}
}

        为了防止plus报错从而引起的运行时出错，所以，我们要修改vue.config.js

//vue.config.js
module.exports={
  lintOnSave: false,
}

测试方法

        利用HBuilderX测试，大概流程：手机打开开发者选项，允许USB调试，利用数据线连接电脑，然后在HBuilderX点击运行，真机运行即可。此时手机一定要连通电脑，我用的是360助手，亲测可用。