mui圖片上傳
你是使用MUI框架做混合開發嗎？，其實就是和網頁的上傳是一樣的。設置好文件接受的name就可以使用PHP的$_FILE處理了。
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. hbuilder編寫markdown怎麼插入圖片
Native.js調用說明 1，需要一定的js、java、oc基礎 2，需要讓NJS調用的原生代碼必須在apk或ipa安裝包(系統api介面除外) 3，如果添加自定義原生代碼暫時離線打包(後期會支持上傳打包)，同時對自定義原生代碼不進行混淆
D. 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語言（國際化），屏幕解析度及尺寸的支持...（當然，這是打包前就應該做好的工作啦）
E. 〖小米5〗muiu8有哪些新功能求解答
一:應用雙開
一個微信兩個號咋辦？MIUI 8的應用雙開能完美解決你這個煩惱，不僅微信、QQ等社交類應用可以分身，包括游戲在內幾乎所有應用都可以完美分身。打開設置-找到應用雙開，選擇你要雙開的應用即可。
二：手機分身
通過不一樣的兩個解鎖密碼，可以直接進入手機里兩個完全不同的桌面。這兩個系統里所有的應用，哪怕是同一個應用，都是完全隔離開來的，相冊、桌面布局、簡訊、甚至你的聯系人通話記錄都是不一樣的。兩個系統間互不幹涉，既可以把工作與生活分開，也可以保護隱私不被輕易的泄露。在設置菜單里找到手機分身選項就能馬上開啟。
三：近期任務管理
我們平時在多個應用間切換的時候，總會用到多任務管理進行切換，如果是不同的軟體，切換起來會很方便，可同一個軟體，就像微信這樣，在閱讀閱讀一篇文章的時候突然來了一條消息，這怎麼切換呢？打開MIUI 8的近期任務管理，你會發現一個後台任務還能對應多個窗口，而且這些窗口可以隨意切換，回消息看文章再也不那麼麻煩了。
四：便簽模板
文藝小青年比如我這樣的，平時就愛隨筆寫些心情分享到微博朋友圈裡。一個普通的長微博難免乏味，還是用用MIUI 8的變遷模板吧，不同的模板賦予原本單調的文字以情感和溫度，給人賞心悅目的感覺。把他配上文字再分享到朋友圈，和朋友一起感受創作和分享的樂趣吧。在便簽編輯界面點擊右下角的「魔術棒」就能開始使用便簽模板了。
五：遠程協助
如何更簡單的幫助父母或手機苦手診斷手機問題？不妨用用MIUI 8里的遠程協助，從桌面找到遠程協助APP，實名認證後便可以開始手機對手機互相發起協助，這樣既可以幫助他們解決手機上的問題，又可防止遠程協助被不法分子利用。
六：長截屏
不同場景對於截屏都有不同的需求，在MIUI 8中，無論是普通截屏還是長截屏，都能非常快速的截取想要的內容。在長截屏中，無論是自動滑動還是手動滑動，都能輕松實現。截圖後還能立即編輯，標記想要的部分或者對圖片部分馬賽克，讓圖片自由度再提升。
必用功能七：懸浮球
懸浮球的真正意義在於，他並不是在代替手機按鍵而存在的，他其實是在讓你平時頻繁使用的操作變成更快捷的操作方式，讓平時需要好幾步的功能變得更加高效。MIUI 8的懸浮球支持自定義功能，而且還支持滑動操作，不用的時候會隱藏成透明按鈕。在更多設置里找到懸浮球就能打開和設置了。
必用功能八：計算器
計算器對於MIUI 8來說不再是簡單計算的工具，還加入了許多生活類的計算。在計算器界面中點擊左上角的按鈕，個稅計算、匯率轉換，甚至是房貸計算，這些超實用功能讓你的計算器更有用。同時，MIUI 8的數字計算器還能隨時修改計算步驟，長按數字還能轉換為中文大寫，看起來簡單，但就是好用。
必用功能九：掃一掃
平時我們用掃一掃都只是在掃二維碼，MIUI 8的掃一掃給掃碼這項簡單的操作賦予了更多有意思的玩法：拍物品自動識別在線購買，掃單詞自動翻譯、掃名片自動識別，拍下不懂的數學題還能自動給出解題步驟和答案。打開掃一掃，用鏡頭探索世界。
必用功能十：視頻編輯
一分鍾做大片是不是聽起來很帶感？MIUI 8視頻編輯幫你實現了！選擇一段視頻，只需要選擇預制好的模板，點一下就能自動生成具有大片效果的視頻，無論是直接上傳到視頻網站還是發給好友，不用太多時間就能做到，省去了麻煩的步驟，玩起來也更有意思。
我知道的就這些，望採納
F. MUI如何實現識別身份證調用相機帶邊框
在IOS端點擊時會提示選擇圖片或相機，安卓端要看瀏覽器對這兩個屬性的優化，部分瀏覽器會直接跳轉到資源管理器，優化做得好的可以直接提示選擇相冊或相機。這兩
G. 小白入門 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的使用還要簡單一些。
H. mui框架 有上傳圖片組件么
mui框架好像沒有自帶的上傳圖片的組件吧！
I. 我用HBuilder寫了一個H5頁面，帶了一個掃一掃功能，為什麼
HBuilder的掃碼功能是H5+的一個類似原生插件的功能，要打包成app的時候才能用，你在HB調試是真機調試吧
J. php中上傳圖片的問題