使用fileReader的一個坑及解決

阿新 • • 發佈：2021-12-10

關於fileReader的一個坑

在用fileReader做圖片瀏覽時，

使用base64格式

var file=this.$refs.resource.files[0]
var reader = new FileReader();
// 以DataURL的形式讀取檔案:
reader.readAsDataURL(file);

//讀取後的回撥是多執行緒
reader.onloadend=(e)=>{
}

本身是單執行緒的，並沒有非同步的特性。由於 script 的運用場景是瀏覽器，瀏覽器本身是典型的 GUI 工作執行緒，GUI 工作執行緒在絕大多數系統中都實現為事件處理，避免阻塞互動，因此產生了Javascript 非同步基因。此後種種都源於此。

沒錯，網路，檔案。。。。都是基於瀏覽器的介面實現的

如果兩次讀取的都是相同的檔案，並不會執行載入完成事件。

fileReader在ios上面的坑（圖片轉base64）http://www.cppcns.com

最近在做專案，傳圖片這是很老的功能了，然後想壓圖片直接傳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,//影象質量
                    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,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")
      
           // 呼叫回撥
                callback&&callback(img.src);
            }
            reader.readAsDataURL(file);
        }

上面這段程式碼在ＰＣ和安卓上執行一切正常，但在ios上會返回固定的一串base64編碼，不管你傳什麼圖片都一樣..

然後就改……

再改.....

檢視各種文件..

繼續改...

最後是這樣子決解的

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(){
                    ctwww.cppcns.com 
x.clearRect(0,cvs.width,cvs.height);
                    cvs.width = img.width;
                    cvs.height = img.height;
                    ctx.drawImage(img,img.width,img.height);
                    var base64 = cvs.toDataURL("image/png");
                    callback(base64);
                    alert("20")
                }
            }
        }

這個才是分享的重點……。

原因就是ios上不支援FileReader物件！

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援我們。