el-upload上传图片获得base64编码

文件上传组件

       <el-upload class="upload-demo" 
                ref="upload"
                action="" 
                drag 
                multiple
                :auto-upload="false"
                :on-success="handleFileUploaderSuccess"
                :on-error="handleFileUploaderError"
                :on-change="handleFileUploaderChange"
                :before-upload="beforeFileUpload"
                :on-exceed="handleExceed"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                </el-upload>

获得base64编码

 imgBase64Array:[],                    //图片的base64编码

     handleFileUploaderChange(file){
                const self = this
                let reader = new FileReader()
                reader.readAsDataURL(file.raw)
                reader.onload  = function(event){
                     let img_base64 = this.result
                     self.imgBase64Array.push(img_base64)
                }
                console.log(file)
            },

添加到页面上

            <div class="imageWrapper">
                        <span  v-for="(imgUrl,index) in imgBase64Array" :key="index">
                              <img class="img" :src="imgUrl" alt="门店照片"/>
                        </span>
             </div>