將file/blob類型的圖片轉換成base64(基於weui圖片上傳插件)

用到了weui圖片上傳,結果生成的是blob:null/5e420b10-2e73-42a3-8184-c75acba11d09這種格式的地址

很難受,不能講這個地址直接存入數據庫

於是就開始百度怎麼轉換這個地址,查了一通終於找到了!

不過不是對這個地址進行解析

而是 對weui插件中的file變量進行解析。直接將圖片生成base64編碼格式,這樣就可以保存到數據庫中了。

一部分代碼

var blobToBase64 = function (blob, callback) {
        var a = new FileReader();
        a.onload = function (e) {
            callback(e.target.result);
        }
        a.readAsDataURL(blob);
    };
for (var i = 0, len = files.length; i < len; ++i) {
            var file = files[i];
            var same_sign = $.inArray(file.name, same)
            if (same_sign == -1) {
                if (url) {
                    src = url.createObjectURL(file);
                    var reader = new FileReader();
                    reader.addEventListener("loadend", function () {

                    });
                    //就是在這裏進行轉換的,data即爲得到的圖片的base64編碼
                    blobToBase64(file, function (data) {
                        console.log(data)
                        ss.push(data)
                    });
                    //***********************************************
                } else {
                    src = e.target.result;
                    console.log("nei?????:" + e.target.result)
                }
                sign = sign + 1;
                imgs.push(src);
                var same_id = file.name;
                var tmpl = `<li class="weui-uploader__file" style="background-image:url(${src});" data-id="${sign}" data-sameId="${same_id}"></li>`
                $uploaderFiles.append(tmpl);
                same.push(file.name);
            } else { }

        }

效果圖:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章