前言
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助手，亲测可用。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之家整理，本文链接：https://www.bmabk.com/index.php/post/11700.html
