基于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);
},复制代码
注. 若单个图片过大,可能会被限制,请与后端沟通