1、例如：

<ul class="upload-imgs">
　　<li v-if="imgLen == 1 ? false : true">
 　　　　<input type="file" class="upload" @change="addImg" ref="inputer" multiple accept="image/*"/>
　　　　<a class="add"><img src="../../assets/index_img/shenfenzheng-a.png" alt=""><p>上傳證件正面</p></a>
　　</li>
　　<li v-for='(value, key) in imgs' :key="key">
　　　　<div class="img"><img :src="getObjectURL(value)" @click="showImg(value)" /><a class="close" @click="delImg(key)">×</a></div>
　　</li>
</ul>

2、圖片操作：

addImg(event){
                let inputDOM = this.$refs.inputer;
                // 通過DOM取檔案資料
                this.fil = inputDOM.files;
                let oldLen = this.imgLen;
                let len = this.fil.length + oldLen;
                for (let i = 0; i < this.fil.length; i++) {
                    const isLt5M = this.fil[i].size <  1024 * 1024;
                    if (!isLt5M) {
                        this.$message({
                            message: '請選擇 1M 以內的圖片!',
                            type: 'warning'
                        });
                        return false
                    }
                    this.imgLen++;
                    this.$set(this.imgs, this.fil[i].name + '?' + new Date().getTime() + i, this.fil[i]);
                }
                for(var i in this.imgs) {
                    var img = this.getObjectURL(this.imgs[i]); 
 

                    var image = new Image();
                    image.src = img;
                    image.onload = function() {
                        var base64 = getBase64Image(image);
                        this.certificate[0] = base64;  //此處可以成功轉成 base64，但是無法賦值全域性變數 this.certificate 
                    }
 

                }
            },

3、回顯圖片：

getObjectURL(file) {
                // console.log(file);
                var url = null ;
                if (window.createObjectURL != undefined) {
                    url = window.createObjectURL(file) ;
                } else if (window.URL != undefined) {
                    url = window.URL.createObjectURL(file) ;
                } else if (window.webkitURL != undefined) {
                    url = window.webkitURL.createObjectURL(file) ;
                }
                return url ;
            },

4、blob 轉base64：

function getBase64Image(img) {
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, img.width, img.height);
        //圖片的格式
        var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
        var dataURL = canvas.toDataURL("image/"+ext);
        return dataURL;
    }

5、data：

certificate: [],
imgs: {},
imgLen:0,
showimgs: null,

6、到第 3 步紅色字型，此時，獲取到的 img 為 blob:http:xxxxxxxx 格式的圖片，用image.onload 轉成 base64 圖片，傳送後端，但是，這裡的 this，指向的是這個 function() 函式，不是全域性，且image.onload = function()，其本身無法攜帶任何引數，所有，需要改成es6的箭頭函式image.onload=()=>，即可賦值給全域性變數