快捷導(dǎo)航

使用fileReader的一個(gè)坑及解決

更新時(shí)間：2021年12月09日 10:12:04 作者：5649498

這篇文章主要介紹了使用fileReader的一個(gè)坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

關(guān)于fileReader的一個(gè)坑

在用fileReader做圖片瀏覽時(shí)，

使用base64格式

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

//讀取后的回調(diào)js是多線程
reader.onloadend=(e)=>{
}

Javascript 本身是單線程的，并沒有異步的特性。由于 Javascript 的運(yùn)用場景是瀏覽器，瀏覽器本身是典型的 GUI 工作線程，GUI 工作線程在絕大多數(shù)系統(tǒng)中都實(shí)現(xiàn)為事件處理，避免阻塞交互，因此產(chǎn)生了Javascript 異步基因。此后種種都源于此。

沒錯(cuò)，網(wǎng)絡(luò)，文件。。。。都是基于瀏覽器的接口實(shí)現(xiàn)的

如果兩次讀取的都是相同的文件，并不會(huì)執(zhí)行加載完成事件。

fileReader在ios上面的坑（圖片轉(zhuǎn)base64）

最近在做項(xiàng)目，傳圖片這是很老的功能了，然后想壓圖片直接傳base64...一開始用的代碼

var fileUpload = function(obj, callback){
            //檢測瀏覽器是否支持FileReader對(duì)象
            if(typeof FileReader == "undefined"){
                alert("您的瀏覽器不支持FileReader對(duì)象！");
            }
            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);
        }

上面這段代碼在ＰＣ和安卓上運(yùn)行一切正常，但在ios上會(huì)返回固定的一串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")
                }
            }
        }

這個(gè)才是分享的重點(diǎn)……。

原因就是ios上不支持FileReader對(duì)象！

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: