mui+vue实现图片上传
在线工具：http://mxdqh.top/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="../css/mui.min.css" rel="stylesheet" />
<link href="../css/common.css" rel="stylesheet" />
<link href="../css/myphone.css" rel="stylesheet" />
<style>
/* .mui-media-bodyEx {
font-size: 13px;
line-height: 15px;
display: block;
width: 100%;
height: 15px;
text-overflow: ellipsis;
color: #6C6C6C;
}
[v-cloak] {
display: none;
}
.mui-card {
font-size: 14px;
position: relative;
overflow: hidden;
margin: 0;
border-radius: 2px;
background-color: #fff;
background-clip: padding-box;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.floatLeftText {
float: left;
text-align: left;
background-color: #C8C7CC;
border-radius: 0.525rem;
padding-left: 0.625rem;
}
.rightText {
text-align: right;
}
.mui-table-view.mui-grid-view .mui-table-view-cell {
font-size: 17px;
display: inline-block;
margin-right: -4px;
text-align: left;
vertical-align: middle;
background: 0 0;
}
.headerMain {
padding: 0.625rem 0 0.625rem 0.625rem;
font-size: smaller;
} */
</style>
</head>
<body>
<div id="imageUpload">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图片上传 </h1>
<a class="mui-icon-right-nav mui-pull-right" v-on:click="headImage()">
<span id="headImage" class="mui-icon mui-icon-camera"></span>
</a>
</header>
<div class="mui-content" style="background-color:#fff">
<template v-if="viewFlage==1" >
<ul id="imgs" class="mui-table-view mui-grid-view">
<li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="(item, index) in filePathList">
<img class="mui-media-object" :src="item">
<span class="mui-icon mui-icon-trash deleteBtn" v-on:click="removeImage(item,index)"></span>
</li>
</ul>
<a class="mui-icon-right-nav mui-pull-right" v-on:click="uploadImage">
<span id="uploadImage" class="mui-icon mui-icon-upload mui-btn"></span>
</a>
</template >
</div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/jquery.min.js"></script>
<script src="../js/utils.js"></script>
<script>
var Vue = new Vue({
el: '#imageUpload',
data: {
viewFlage: 0,
fileArr: [],
filePathList: [],
},
// 初期化的时候调用后台
created: function() {},
methods: {
headImage: function() {
if (mui.os.plus) {
var buttonTit = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "上传图片",
cancel: "取消",
buttons: buttonTit
}, function(b) { /*actionSheet 按钮点击事件*/
switch (b.index) {
case 0:
break;
case 1:
Vue.getImage(); /*拍照*/
break;
case 2:
Vue.galleryImg(); /*打开相册*/
break;
default:
break;
}
})
}
},
// 拍照获取图片
getImage: function() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径
Vue.setFile(imgSrc);
Vue.filePathList.push(imgSrc);
Vue.viewFlage =1
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(s) {
console.log("error" + s.message);
}, {
filename: "_doc/camera/"
})
},
// 从相册中选择图片
galleryImg: function() {
// 从相册中选择图片
plus.gallery.pick(function(e) {
for (var i in e.files) {
var fileSrc = e.files[i];
Vue.viewFlage = 1
Vue.setFile(fileSrc);
Vue.filePathList.push(fileSrc);
}
}, function(e) {
console.log("取消选择图片");
}, {
filter: "image",
multiple: true,
//maximum: 5,
system: false,
onmaxed: function() {
plus.nativeUI.alert('最多只能选择5张图片');
}
});
},
setFile: function(fileSrc) {
var image = new Image();
image.src = fileSrc;
this.viewFlage = 1
this.fileArr.push(image);
},
removeImage: function(item, index) {
Vue.filePathList.splice(index, 1)
Vue.fileArr.splice(index, 1);
if(Vue.filePathList.length==0){
Vue.viewFlage=0;
}
},
uploadImage: function() {
var files = this.fileArr;
var wt = plus.nativeUI.showWaiting();
var task = plus.uploader.createUpload('../privilege/Upload', {
method: "POST"
},
function(t, status) { //上传完成
if (status == 200) {
alert("上传成功：" + t.responseText);
wt.close(); //关闭等待提示按钮
} else {
alert("上传失败：" + status);
wt.close(); //关闭等待提示按钮
}
}
);
//将文件集合添加到上传队列中
for (var i = 0; i < files.length; i++) {
var f = files[i];
task.addFile(f.src, {
key: i
});
}
//传其他的参数 如备注
//添加其他参数
//遍历5个input框
task.addData("comment", "test");
task.start();
}
},
watch: {}
});
mui.init({
swipeBack: true //启用右滑关闭功能
});
</script>
</body>
</html>
网友评论