0

Coud you help me with my trouble: I used Vue.js. My task was: to convert image in base64 and next send to server. So I wrote code below, but got an error. When I call function readfile I got an error back: enter image description here

The error is

"this.bufferToBase64 is not a function"

My HTML code is:

     <div>
      <button class="btn">Upload</button>
      <input type="file" id="fileItem" @change="readfile('fileItem')">
    </div>

And my methods are:

  readfile(id) {
   let f = document.getElementById(id).files[0];
   console.log(f);
    let r = new FileReader();
    r.readAsArrayBuffer(f);
    r.onload = function (e) {
      console.log(e);
      let data = r.result;
      console.log('data: ' + data);
      let bytes = new Uint8Array(data);
      console.log('bytes: ' + bytes);
      let b64encoded = this.bufferToBase641(bytes);
      console.log(b64encoded);
    };
  },
  bufferToBase641(buf) {
    let binstr = Array.prototype.map.call(buf, function (ch) {
      return String.fromCharCode(ch);
    }).join('');
    return btoa(binstr);
  }

And next I will be use upload component in Element.io. But now I have the same error. My HTML:

      <el-upload
               :file-list="fileList"
               :auto-upload="false"
               :before-upload="readfile"
               accept="image/*">
      <el-button type="primary" style="padding: 10px 40px;">
        <span class="glyphicon glyphicon-picture"></span> Attach</el-button>
    </el-upload>

And my Methods:

  setAtrbt(){
   let input = document.querySelector('.el-upload__input');
   console.log(input);
   input.setAttribute('onchange', 'vm.readfile(this.files[0])')
 },
  readfile(id) {
   let f = document.getElementById(id).files[0];
   console.log(f);
    let r = new FileReader();
    r.readAsArrayBuffer(f);
    r.onload = function (e) {
      console.log(e);
      let data = r.result;
      console.log('data: ' + data);
      let bytes = new Uint8Array(data);
      console.log('bytes: ' + bytes);
      let b64encoded = this.bufferToBase641(bytes);
      console.log(b64encoded);
    };
  },
  bufferToBase641(buf) {
    let binstr = Array.prototype.map.call(buf, function (ch) {
      return String.fromCharCode(ch);
    }).join('');
    return btoa(binstr);
  }
},
mounted(){
  this.setAtrbt();
}

Can someone tell me, please, how shoud I use function bufferToBase641 right? And maybe my actions with Element.io is not good?

Ilia Ch.
  • 45
  • 1
  • 8

1 Answers1

0

You have scope problem. You lost reference for this, as you are in nested function, which have own this object. Improve your code:

eadfile(id) {
  let f = document.getElementById(id).files[0];
  console.log(f);
  let r = new FileReader();
  r.readAsArrayBuffer(f);
  var self = this // ADD THIS
  r.onload = function (e) {
    console.log(e);
    let data = r.result;
    console.log('data: ' + data);
    let bytes = new Uint8Array(data);
    console.log('bytes: ' + bytes);
    let b64encoded = self.bufferToBase641(bytes); // CHANGE THIS
    console.log(b64encoded);
  };
},

You can also use the arrow function for you r.onload callback:

eadfile(id) {
  let f = document.getElementById(id).files[0];
  console.log(f);
  let r = new FileReader();
  r.readAsArrayBuffer(f);
  r.onload = e => { // CHANGE JUST THIS LINE
    console.log(e);
    let data = r.result;
    console.log('data: ' + data);
    let bytes = new Uint8Array(data);
    console.log('bytes: ' + bytes);
    let b64encoded = this.bufferToBase641(bytes);
    console.log(b64encoded);
  };
},
  • Thx, you are the best! Is it a conflict with "THIS" or I just don't know something? – Ilia Ch. Nov 14 '17 at 13:17
  • @IlyaCh. Yes, you just lost reference for `this`, as you are in nested function, which have own `this` object. You can also use the arrow function for you callback: change this line `r.onload = function (e) {` to this syntax `r.onload = e => {` and your callback wil work even without `var self = this`. Just call your method as usually: `let b64encoded = this.bufferToBase641(bytes)`, so without any changes. –  Nov 14 '17 at 13:21
  • you right, you right. Thanks! – Ilia Ch. Nov 14 '17 at 13:31
  • @IlyaCh. Glad to help :) –  Nov 14 '17 at 13:31