使用fileReader的一個坑及解決
更新時間：2021年12月09日 10:12:04 作者：5649498
這篇文章主要介紹了使用fileReader的一個坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
關于fileReader的一個坑
在用fileReader做圖片瀏覽時，
使用base64格式
var file=this.$refs.resource.files[0] var reader = new FileReader(); // 以DataURL的形式讀取文件: reader.readAsDataURL(file);
//讀取后的回調(diào)js是多線程
reader.onloadend=(e)=>{
}
Javascript 本身是單線程的，并沒有異步的特性。由于 Javascript 的運用場景是瀏覽器，瀏覽器本身是典型的 GUI 工作線程，GUI 工作線程在絕大多數(shù)系統(tǒng)中都實現(xiàn)為事件處理，避免阻塞交互，因此產(chǎn)生了Javascript 異步基因。此后種種都源于此。
沒錯，網(wǎng)絡，文件。。。。都是基于瀏覽器的接口實現(xiàn)的
如果兩次讀取的都 是相同的文件，并不會執(zhí)行加載完成事件。
fileReader在ios上面的坑（圖片轉(zhuǎn)base64）
最近在做項目，傳圖片這是很老的功能了，然后想壓圖片直接傳base64...一開始用的代碼
var fileUpload = function(obj, callback){
//檢測瀏覽器是否支持FileReader對象
if(typeof FileReader == "undefined"){
alert("您的瀏覽器不支持FileReader對象！");
}
var file = obj;
//判斷類型是不是圖片
if(!/image\/\w+/.test(file.type)){
alert("請確保文件為圖像類型");
return false;
}
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image,
width = 95, //圖片resize寬度
quality = 0.2, //圖像質(zhì)量
canvas = document.createElement('canvas'),
drawer = canvas.getContext("2d");
img.src = this.result;
var scale = parseInt(img.height / img.width);
img.width=width;
img.height = width * scale;
canvas.width = img.width;
canvas.height = img.height;
drawer.drawImage(testimgId, 0, 0, canvas.width, canvas.height);
var base64 = canvas.toDataURL('image/jpeg', 0.2);
console.log(base64);
var image_base64 = img.src.replace("data:image/png;base64,","");
image_base64=encodeURIComponent(image_base64);
alert("19")
// 調(diào)用回調(diào)
callback&&callback(img.src);
}
reader.readAsDataURL(file);
}
上面這段代碼在ＰＣ和安卓上運行一切正常，但在ios上會返回固定的一串base64編碼，不管你傳什么圖片都一樣..
然后就改……
再改.....
查看各種文檔..
繼續(xù)改...
最后是這樣子決解的
function getBase64(fileObj){
var file = fileObj,
cvs = document.getElementById("canvas"),
ctx = cvs.getContext("2d");
if(file){
var url = window.URL.createObjectURL(file);//PS:不兼容IE
var img = new Image();
img.src = url;
img.onload = function(){
ctx.clearRect(0,0,cvs.width,cvs.height);
cvs.width = img.width;
cvs.height = img.height;
ctx.drawImage(img,0,0,img.width,img.height);
var base64 = cvs.toDataURL("image/png");
callback(base64);
alert("20")
}
}
}
這個才是分享的重點……。
原因就是ios上不支持FileReader對象！
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于JS算法教程之字符串去重與字符串反轉(zhuǎn)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了微信小程序發(fā)送短信驗證碼完整實例，實現(xiàn)發(fā)送短信驗證碼，帶60秒倒計時功能，無需服務器端，非常具有實用價值，需要的朋友可以參考下2019-01-01
js+css實現(xiàn)有立體感的按鈕式文字豎排菜單效果
這篇文章主要介紹了js+css實現(xiàn)有立體感的按鈕式文字豎排菜單效果,通過javascript動態(tài)調(diào)用頁面元素樣式實現(xiàn)豎排菜單的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了javascript原型模式用法,以實例形式較為詳細的分析了javascript原型模式的原理與使用技巧,需要的朋友可以參考下2015-06-06
在實際的開發(fā)工作過程中，積累了一些常見又超級好用的 Javascript 技巧和代碼片段，包括整理的其他大神的 JS 使用技巧，今天篩選了 9 個，以供大家參考2023-04-04
這篇文章主要為大家詳細介紹了微信小程序左右滑動刪除事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
這篇文章主要介紹了bootstrap響應式工具使用的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
javascript獲取checkbox復選框獲取選中的選項
這篇文章主要介紹了javascript獲取checkbox復選框獲取選中的選項的方法,需要的朋友可以參考下2014-08-08
微信小程序?qū)崿F(xiàn)觸底加載與下拉刷新的示例代碼
本文主要介紹了微信小程序?qū)崿F(xiàn)觸底加載與下拉刷新的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
這篇文章主要介紹了解決 window.onload 被覆蓋的問題方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01