el-upload 讀取圖檔為Base64位資料

• 前端HTML
• • JS代碼

小編由于架構限制不能直接将圖檔上傳到伺服器，所有小編隻能研究将圖檔轉為base64位，雖然網上有很多的例子，但是最後還都是失敗了，下面的代碼是小編研究的結果，并且可以正常實作此功能，希望對後面的人有幫助。

前端HTML

<el-upload
          class="avatar-uploader"
          ref="upload"
          action="#"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-success="handleChange"
          :on-change="onChange"
          :auto-upload="false"
          :data="addList">

          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
           

JS代碼

beforeUpload(){
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上傳頭像圖檔隻能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上傳頭像圖檔大小不能超過 2MB!');
      }
      return isJPG && isLt2M;
    },
    onChange(file,fileList){
      var _this = this;
      var event = event || window.event;
      var file = event.target.files[0];
      var reader = new FileReader();
      //轉base64
      reader.onload = function(e) {
        _this.imageUrl = e.target.result //将圖檔路徑指派給src
        _this.guideImage =e.target.result //将圖檔路徑指派給src

      }
      reader.readAsDataURL(file);
    },
    handleChange(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },