mui上传图片
B. input flie 拍照不能上传
<template>
<h5 class="content-header">图片列表</h5>
<div class="image-list">
<div class="list-default-img" v-show="isPhoto" @click.stop="addPic">
<img src="./images/icon_photo.png" />
<span>请选择或者拍照上传照片</span>
<input type="file" accept="image/jpeg,image/jpg,image/png" capture="camera" @change="onFileChange" style="display: none;">
</div>
<ul class="list-ul" v-show="!isPhoto">
<li class="list-li" v-for="(iu, index) in imgUrls">
<a class="list-link" @click='previewImage(iu)'>
<img :src="iu">
</a>
<span class="list-img-close" @click='delImage(index)'></span>
</li>
<li class="list-li-add">
<span class="add-img" @click.stop="addPic"></span>
</li>
</ul>
</div>
<div class="add-preview" v-show="isPreview" @click="closePreview">
<img :src="previewImg">
</div>
</template>
<script>
export default {
data: function () {
return {
imgUrls: [],
urlArr: [],
isPhoto: true,
btnTitle: '',
isModify: false,
previewImg:'',
isPreview: false
}
},
watch: {
imgUrls: 'toggleAddPic'
},
methods: {
toggleAddPic: function() {
let vm = this;
if(vm.imgUrls.length >= 1) {
vm.isPhoto = false;
} else {
vm.isPhoto = true;
}
},
addPic: function(e) {
let vm = this;
$('input[type=file]').trigger('click');
return false;
},
onFileChange: function(e) {
var files = e.target.files || e.dataTransfer.files;
if(!files.length) return;
this.createImage(files, e);
},
createImage: function(file, e) {
let vm = this;
lrz(file[0], { width: 480 }).then(function(rst) {
vm.imgUrls.push(rst.base64);
return rst;
}).always(function() {
// 清空文件上传控件的值
e.target.value = null;
});
},
delImage: function(index) {
let vm = this;
let btnArray = ['取消', '确定'];
mui.confirm('确定删除该图片?','提示', btnArray, function(e) {
if (e.index == 1) {
vm.imgUrls.splice(index, 1);
}
})
},
previewImage: function(url){
let vm = this;
vm.isPreview = true;
vm.previewImg = url;
},
closePreview: function(){
let vm = this;
vm.isPreview = false;
vm.previewImg = "";
},
saveImage: function(){
let vm = this;
let urlArr = [],
imgUrls = this.imgUrls;
for(let i = 0; i < imgUrls.length; i++) {
if(imgUrls[i].indexOf('file') == -1) {
urlArr.push(imgUrls[i].split(',')[1]);
} else {
urlArr.push(imgUrls[i]);
}
}
//数据传输操作
}
}
}
</script>
1.点击拍照或选择图片addPic
在vue.js中出发拍照和选择图片是频繁操作行为，每次只能拍照或选择一张图片，可以拍多张上传，使用给click事件加上.stop的修饰符，.stop- 调用event.stopPropagation()，是为了停止冒泡。accept是为了规定通过文件上传来提交的文件的类型，capture是webApp中捕获到系统默认的设备，camera--照相机；camcorder--摄像机；microphone--录音。
4. 大图预览已经被压缩的图片及关闭大图预览 isPreview previewImageclosePreview
在这里大图预览就是将base64格式的图片直接放进预览DOM的img src中放大展示，点击图片自身关闭预览，清空img src资源。
5. 对base64图片传输前的处理 saveImage
saveImage: function(){
let vm = this;
let urlArr = [],
imgUrls = this.imgUrls;
for(let i = 0; i < imgUrls.length; i++) {
if(imgUrls[i].indexOf('file') == -1) {
urlArr.push(imgUrls[i].split(',')[1]);
} else {
urlArr.push(imgUrls[i]);
}
}
//数据传输操作
}
我压缩成base64字符串是“data:image/jpeg;base64,~~”的字符串，为了后端好处理，我这里为了将编辑时候后台返回的图片url区别开来，将“data:image/jpeg;base64,"截取掉，只传递给后端逗号后面的base64字符串。
注意：后端接收到我传递的base64字符串数组的时候，发现字符经如果被urlencode后标准的base64中的/、 +会被转成%xx，后端在将base64字符串处理成图片时，需要将特殊字符过滤掉。
[HttpPost]
public ActionResult MUploadImgBase64Str(string base64str)
{
try
{
var imgData = base64str;
//过滤特殊字符即可
string mmyData = imgData.Trim().Replace("%", "").Replace(",", "").Replace(" ", "+");
if (mmyData.Length % 4 > 0)
{
mmyData = mmyData.PadRight(mmyData.Length + 4 - mmyData.Length % 4, '=');
}
byte[] byteArray = Convert.FromBase64String(mmyData);
using (System.IO.MemoryStream ms = new System.IO.MemoryStream(byteArray))
{
var img = System.Drawing.Image.FromStream(ms);
var path = "~/Content/UploadFiles/mobile/";
var uploadpath = Server.MapPath(path);
if (!Directory.Exists(uploadpath))
{
Directory.CreateDirectory(uploadpath);
}
var saveName = uploadpath + “stoneniqiu” + ".jpg";
img.Save(saveName);
return Json(saveName);
}
}
catch (Exception e)
{
return Json(e.Message);
}
}
C. mui框架 有上传图片组件么
mui框架好像没有自带的上传图片的组件吧！
D. mui页面之间怎么实现传值，例如a页面的id怎么带到b页面上
如果都是html页面的话，就实现不了。因为两个页面要相互传值。只有动态页面才能处理请求。不好意思，我刚查了一下，仅用js也可以实现，它是分隔字符串实现的，代码如下：此处使用JS方式实现静态页之间值传递，其实很简单，废话不多说，见代码
E. mui 主页面怎么向子页面传值
在App开发中，页面间传值是很常见的开发需求，mui框架根据业务场景不同，提供了两种传值模式。
1、页面初始化时，通过扩展参数传值；
mui在初始化页面时，提供了extras配置参数，通过该参数可以设置页面参数，从而实现页面间传值；
mui框架在如下几种场景下，会执行页面初始化操作：
- 通过mui.openWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递的extras参数无效）；
- 通过mui.init()方法创建子页面；
- 通过mui.init()方法预加载页面；
- 通过mui.preload()方法预加载页面
示例，假设我们有如下需求：
在首页中打开关于页面时，传递当前产品名称及版本号，然后在关于页面中读取这两个参数并显示出来；
首页实现代码：
mui.openWindow({
url:'info.html',
id:'info.html',
extras:{
name:'mui',
version:'0.5.8'
}
});
\n
关于页面实现代码：
var self = plus.webview.currentWebview();
var name = self.name;
var version = self.version;
\n
2、页面已创建，通过自定义事件传值
F. mui img引入图片手机端却不清晰什么原因
更换清晰度更高的jpg格式图片
G. H5+和mui开发的app，拍照完成后如何将拍到的照片在页面中形成预览图
【几种打开页面的方式】
1.初始化时创建子页面
2.直接打开新页面
3.预加载页面
【示例】
1.初始化时创建子页面
[js] view plain
mui.init({
subpages: [{
url: your - subpage - url, //子页面HTML地址，支持本地地址和网络地址
id: your - subpage - id, //子页面标志
styles: {
top: subpage - top - position, //子页面顶部位置
bottom: subpage - bottom - position, //子页面底部位置
width: subpage - width, //子页面宽度，默认为100%
height: subpage - height, //子页面高度，默认为100%
......
},
extras: {} //额外扩展参数
}]
});
2.直接打开新页面
[js] view plain
mui.openWindow({
url: new - page - url,
id: new - page - id,
styles: {
top: newpage - top - position, //新页面顶部位置
bottom: newage - bottom - position, //新页面底部位置
width: newpage - width, //新页面宽度，默认为100%
height: newpage - height, //新页面高度，默认为100%
......
},
extras: {
..... //自定义扩展参数，可以用来处理页面间传值
}
show: {
autoShow: true, //页面loaded事件发生后自动显示，默认为true
aniShow: animationType, //页面显示动画，默认为”slide-in-right“；
ration: animationTime //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
},
waiting: {
autoShow: true, //自动显示等待框，默认为true
title: '正在加载...', //等待对话框上显示的提示内容
options: {
width: waiting - dialog - widht, //等待框背景区域宽度，默认根据内容自动计算合适宽度
height: waiting - dialog - height, //等待框背景区域高度，默认根据内容自动计算合适高度
......
}
}
})
3.预加载页面
[js] view plain
// 方式1
mui.init({
preloadPages: [{
url: prelaod - page - url,
id: preload - page - id,
styles: {}, //窗口参数
extras: {}, //自定义扩展参数
subpages: [{}, {}] //预加载页面的子页面
}]
});
// 方式2
var page = mui.preload({
url: new - page - url,
id: new - page - id, //默认使用当前页面的url作为id
styles: {}, //窗口参数
extras: {} //自定义扩展参数
});
【一些区别】
1.子页面和非子页面
以上三种方式中，2，3打开的页面非子页面，
区别是子页面相当于html中的iframe，而非子页面相当于新开了一个浏览器窗口加载了一个html
2.子页面适用于侧滑菜单
子页面有其有点，特别适用与index.html+list.html这种情况，
如果用index.html(主页面)+list.html(子页面)实现的话，当主页面右滑时子页面会自动跟随，
而用index.html(主页面)+list.html(新页面)实现的话，主页面右滑，新页面不右滑，还得单独处理新页面。
3.子页面实用频繁切换的情况
如果频繁左滑右滑，在配置较低的手机上会出现list.html遮住index.html的情况，
采用子页面模式就不会，采用新页面模式几率很大。
4.子页面适用与下拉刷新和上拉加载
之前做大下拉刷新的时候，采用的是新页面的形式，
按照官网教程，怎么搞都不成功，
后来看了下源码，发现下拉刷新必须采用子页面的形式，
也就是你的list.html必须是index.html的子页面，才可以下拉刷新。
5.新页面适用于新页面
open一个新页面，适用于查看详情之类的，需要打开一个新页面的情况，
并且mui自己封装了新页面的back方法，你就不需要去操心了。
6.预加载页面的两种方式
第一种是在初始化的时候预加载，
这种情况适合在你这个页面在很久之后才会用，
如果你要立即到的页面并使用，那么你会得到null。
H. MUI如何实现识别身份证调用相机带边框
在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。这两
I. thinkphp怎么接收mui上传图片
你是使用MUI框架做混合开发吗？，其实就是和网页的上传是一样的。设置好文件接受的name就可以使用PHP的$_FILE处理了。