上传图片，预览，删除-CSDN博客

基于mui,vue

无限制上传图片，上传成功后会返回MD5 加密路径

选择上传图片方式--》拍照/从相册--》拍照获取图片/从相册上传--》设置路径--》提交

预览效果基于mui

1.html

<div class="mui-input-row">
					<label>上传图片:</label>
					<div class="addImg" id="showImg">
						<div class="images" v-for="(list,index) in addImageMD5" :key="index" v-show="list.isShow">
							<span @tap="delImg(index)">X</span>
							<img :src="list.url" data-preview-src="" />
						</div>
						<a class="mui-icon mui-icon-plusempty" @tap="headImage"> +</a>
					</div>
				</div>复制代码

headImage: function() {//选择方式
						//var fileArr = [];

						var that = this;
						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:
										that.getImage(); /*拍照*/
										break;
									case 2:
										that.galleryImg(); /*打开相册*/
										break;
									default:
										break;
								}
							})
						}
					},
					getImage: function() { // 拍照获取图片 
						var that = this;
						var c = plus.camera.getCamera();
						c.captureImage(function(e) {
							plus.io.resolveLocalFileSystemURL(e, function(entry) {
								var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径  
								that.setFile(imgSrc);
								that.setHtml(imgSrc);
								that.subImg();
							}, function(e) {
								console.log("读取拍照文件错误：" + e.message);
							});
						}, function(s) {
							console.log("error" + s.message);
						}, {
							filename: "_doc/camera/"
						})
					},
					galleryImg: function() { // 从相册中选择图片   
						var that = this;
						// 从相册中选择图片  
						plus.gallery.pick(function(e) {
							for (var i in e.files) {
								var fileSrc = e.files[i];
								that.setFile(fileSrc);
								that.setHtml(fileSrc);
							}
							that.subImg();
						}, 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.fileArr.push(image);
						console.log("sssssssssss:" + image.src);
					},
					subImg: function() {//提交
						var that = this;
						that.disable = 'disable';
						var url = 'http://55555555555555555555555';
						var files = this.fileArr;
						var wt = plus.nativeUI.showWaiting();
						var task = plus.uploader.createUpload(url, {
							method: "POST"
						}, function(t, status) { //上传完成
							if (status == 200) {
								app.ImageMD5 = [];
								app.addImageMD5 = [];
								console.log("返回结果：" + t.responseText);
								var MD = JSON.parse(t.responseText);
								console.log(MD.Files.length);
								for (var i = 0; i < MD.Files.length; i++) {
									var obj = {};
									var MD5 = MD.Files[i].MD5;
									obj.url = MD.Files[i].Url;
									obj.isShow = true;
									app.addImageMD5.push(obj)
									app.ImageMD5.push(MD5);
								}
								//mui.toast("上传完成!")
								console.log(JSON.stringify(app.addImageMD5));
								console.log(app.ImageMD5);
								that.disable = null;
								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
							});
							//console.log("dddddd:" + f.src);
						}
						console.log(JSON.stringify(task));
						task.start();
						
					},       
复制代码

删除

delImg: function(index) {
						//this.addImageMD5[index].isShow = false;
						this.ImageMD5.splice(index, 1);
						this.addImageMD5.splice(index, 1);
					},复制代码

注. 若单个图片过大，可能会被限制，请与后端沟通