上傳圖片，預覽，刪除

基於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>複製代碼

js

 

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);
					},複製代碼

注.  若單個圖片過大，可能會被限制，請與後端溝通