‘壹’ php中上传图片的问题
‘贰’ thinkphp怎么接收mui上传图片
你是使用MUI框架做混合开发吗？，其实就是和网页的上传是一样的。设置好文件接受的name就可以使用PHP的$_FILE处理了。
‘叁’ 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);
}
}
‘肆’ mui 打包apk怎么发布在android
我将重点给大家介绍，发布时候生成的“签名文件”的作用（前面提过，叫大家一定要保管好此文件），如何验证自己的App是否发布成功，是否成功签名，以及发布后的apk文件如何上传（一般上传到哪里去，要怎么弄呢？要注意那些问题等等）。 谈到“签名文件”的作用，首先我想到了Windows下的“DLL地狱”。如果读者是一位Windows程序员（尤其是年纪大一点的程序员），谈“DLL”色变，那可真是个噩梦啊。 所谓的“DLL地狱”，就是指“DLL文件覆盖”（因为Windows文件系统有个原则，同一个目录下面如果出现同类型且类型命名相同的文件，后者将覆盖前者。）。好了，这大概不是本文的重点，有兴趣的读者可以参考相关资料。 后来到了/Linux/2011-10/45887.htm）中的具体步骤，尝试着发布自己的app，并请保留好签名文件。 签名完成后，你可以用winrar打开apk，在Meta-inf目录下，用文本编辑器打开CERT.RSA文件，如果能看到部分你建的key时候输入的文本就是正式签名了，如果测试签名会有debug字样。（一般情况会乱码，但是用肉眼仔细观察，你就能略微的看清楚一些啦） 值得提醒的就是，软件代码更新后（需要发布新的APK了），要将Manifest的Android:versionCode值+1，每更新一次都要加1。 弄明白这些之后，该向大家讲讲上传应用了。由于Android是一个相对开放的平台，所以上传应用的限制也低一些，而且缺乏官方的规范。不像苹果和它的APP商店那般封闭。国内而言，上传应用的网站有很多，国内比较有名的就是“安卓市场”，“Android 电子市场”，“机锋市场”...... 不同的市场审核规则也不尽相同，但是大同小异。还有一些值得注意的是：注意你的APP语言（国际化），屏幕分辨率及尺寸的支持...（当然，这是打包前就应该做好的工作啦）
‘伍’ 我用HBuilder写了一个H5页面，带了一个扫一扫功能，为什么
HBuilder的扫码功能是H5+的一个类似原生插件的功能，要打包成app的时候才能用，你在HB调试是真机调试吧
‘陆’ MUI如何实现识别身份证调用相机带边框
在IOS端点击时会提示选择图片或相机，安卓端要看浏览器对这两个属性的优化，部分浏览器会直接跳转到资源管理器，优化做得好的可以直接提示选择相册或相机。这两
‘柒’ hbuilder编写markdown怎么插入图片
Native.js调用说明 1，需要一定的js、java、oc基础 2，需要让NJS调用的原生代码必须在apk或ipa安装包(系统api接口除外) 3，如果添加自定义原生代码暂时离线打包(后期会支持上传打包)，同时对自定义原生代码不进行混淆
‘捌’ mui框架 有上传图片组件么
mui框架好像没有自带的上传图片的组件吧！
‘玖’ 小白入门 webApp开发中如何进行相册/拍照
点击用户头像后，弹出actionSheet，选着从相册或是拍照；选着图片后就调用上传方法，上传图片；在上传之前先压缩了一下图片。
使用流程
弹出actionSheet
/
*点击头像触发*/
document.getElementById('headImage').addEventListener('tap', function() {
if (mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "修改用户头像",
cancel: "取消",
buttons: a
}, function(b) { /*actionSheet 按钮点击事件*/
switch (b.index) {
case 0:
break;
case 1:
getImage(); /*拍照*/
break;
case 2:
galleryImg();/*打开相册*/
break;
default:
break;
}
})
}
}, false);
拍照上传
//拍照
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var s = entry.toLocalURL() + "?version=" + new Date().getTime();
uploadHead(s); /*上传图片*/
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head.png"
})
}
从相册选图上传
//本地相册选择
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.png", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.To(root, 'head.png', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
uploadHead(e); /*上传图片*/
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
},
function(e) {
console.log(' image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.To(root, 'head.png', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
uploadHead(path); /*上传图片*/
},
function(e) {
console.log(' image fail:' + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
图片上传和压缩
//上传头像图片
function uploadHead(imgPath) {
console.log("imgPath = " + imgPath);
mainImage.src = imgPath;
mainImage.style.width = "60px";
mainImage.style.height = "60px";
var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
/*在这里调用上传接口*/// mui.ajax("图片上传接口", {// data: {// // },// dataType: 'json',// type: 'post',// timeout: 10000,// success: function(data) {// console.log('上传成功');// },// error: function(xhr, type, errorThrown) {// mui.toast('网络异常，请稍后再试！');// }// });
}
}
//将图片压缩转成base64
function getBase64Image(img) {
var canvas = document.createElement("canvas");
var width = img.width;
var height = img.height;
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > 100) {
height = Math.round(height *= 100 / width);
width = 100;
}
} else {
if (height > 100) {
width = Math.round(width *= 100 / height);
height = 100;
}
}
canvas.width = width; /*设置新的图片的宽度*/
canvas.height = height; /*设置新的图片的长度*/
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height); /*绘图*/
var dataURL = canvas.toDataURL("image/png", 0.8);
return dataURL.replace("data:image/png;base64,", "");
}
总结
在使用中，我们可以发现，使用流程是非常清晰的；某种程度来说比原生iOS的使用还要简单一些。
‘拾’ 〖小米5〗muiu8有哪些新功能求解答
一:应用双开
一个微信两个号咋办？MIUI 8的应用双开能完美解决你这个烦恼，不仅微信、QQ等社交类应用可以分身，包括游戏在内几乎所有应用都可以完美分身。打开设置-找到应用双开，选择你要双开的应用即可。
二：手机分身
通过不一样的两个解锁密码，可以直接进入手机里两个完全不同的桌面。这两个系统里所有的应用，哪怕是同一个应用，都是完全隔离开来的，相册、桌面布局、短信、甚至你的联系人通话记录都是不一样的。两个系统间互不干涉，既可以把工作与生活分开，也可以保护隐私不被轻易的泄露。在设置菜单里找到手机分身选项就能马上开启。
三：近期任务管理
我们平时在多个应用间切换的时候，总会用到多任务管理进行切换，如果是不同的软件，切换起来会很方便，可同一个软件，就像微信这样，在阅读阅读一篇文章的时候突然来了一条消息，这怎么切换呢？打开MIUI 8的近期任务管理，你会发现一个后台任务还能对应多个窗口，而且这些窗口可以随意切换，回消息看文章再也不那么麻烦了。
四：便签模板
文艺小青年比如我这样的，平时就爱随笔写些心情分享到微博朋友圈里。一个普通的长微博难免乏味，还是用用MIUI 8的变迁模板吧，不同的模板赋予原本单调的文字以情感和温度，给人赏心悦目的感觉。把他配上文字再分享到朋友圈，和朋友一起感受创作和分享的乐趣吧。在便签编辑界面点击右下角的“魔术棒”就能开始使用便签模板了。
五：远程协助
如何更简单的帮助父母或手机苦手诊断手机问题？不妨用用MIUI 8里的远程协助，从桌面找到远程协助APP，实名认证后便可以开始手机对手机互相发起协助，这样既可以帮助他们解决手机上的问题，又可防止远程协助被不法分子利用。
六：长截屏
不同场景对于截屏都有不同的需求，在MIUI 8中，无论是普通截屏还是长截屏，都能非常快速的截取想要的内容。在长截屏中，无论是自动滑动还是手动滑动，都能轻松实现。截图后还能立即编辑，标记想要的部分或者对图片部分马赛克，让图片自由度再提升。
必用功能七：悬浮球
悬浮球的真正意义在于，他并不是在代替手机按键而存在的，他其实是在让你平时频繁使用的操作变成更快捷的操作方式，让平时需要好几步的功能变得更加高效。MIUI 8的悬浮球支持自定义功能，而且还支持滑动操作，不用的时候会隐藏成透明按钮。在更多设置里找到悬浮球就能打开和设置了。
必用功能八：计算器
计算器对于MIUI 8来说不再是简单计算的工具，还加入了许多生活类的计算。在计算器界面中点击左上角的按钮，个税计算、汇率转换，甚至是房贷计算，这些超实用功能让你的计算器更有用。同时，MIUI 8的数字计算器还能随时修改计算步骤，长按数字还能转换为中文大写，看起来简单，但就是好用。
必用功能九：扫一扫
平时我们用扫一扫都只是在扫二维码，MIUI 8的扫一扫给扫码这项简单的操作赋予了更多有意思的玩法：拍物品自动识别在线购买，扫单词自动翻译、扫名片自动识别，拍下不懂的数学题还能自动给出解题步骤和答案。打开扫一扫，用镜头探索世界。
必用功能十：视频编辑
一分钟做大片是不是听起来很带感？MIUI 8视频编辑帮你实现了！选择一段视频，只需要选择预制好的模板，点一下就能自动生成具有大片效果的视频，无论是直接上传到视频网站还是发给好友，不用太多时间就能做到，省去了麻烦的步骤，玩起来也更有意思。
我知道的就这些，望采纳