mui+vue实现图片上传

最新推荐文章于 2024-05-24 10:55:30 发布

置顶深夜程序员

最新推荐文章于 2024-05-24 10:55:30 发布

阅读量612

点赞数 1

文章标签：图片上传 mui和vue实现图片上传 mui图片拍照上传 mui和vue实现图片拍照上传

本文链接：https://blog.csdn.net/lv5751394/article/details/98206488

版权

<!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>

个人博客：十分钟空间：https://tmspace.cn/

更多内容关注公众号：tenmspace

深夜程序员

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
mui+vue实现图片上传

在线工具：http://mxdqh.top/<!doctype html><html> <head> <meta charset="utf-8"> <title>空箱入库-已选择空箱</title> <meta name="viewport" content="width=device-width...
复制链接

扫一扫