原生html选择图片 获取BASE64 与 el-upload 选择图片获取BASE64

1. 原生

 

   <input type="file" onchange="handleFiles(this.files)" />

 handleFiles(files) {
　　　　var base64 = ""
      if (files.length) {
        let file = files[0];
        let reader = new FileReader();
        reader.onload = function () {
          var decu = document.getElementById("imgContent");
          decu.src = this.result;
         base64 = this.result;
        };
        reader.readAsDataURL(file);
      }
    },

2.el-upload

 

 

   <el-upload
                class="upload-demo"
                drag
                :on-change="handleChange"
                action="#"
                :auto-upload="false"
              >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="el-upload__tip" slot="tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>

    handleChange(file, fileList) {
      const a = new FileReader();
      a.readAsDataURL(file.raw);
      a.onload = (e) => {
        let base64 = e.target.result;
        console.log(base64); //base64数据
      };
    },