Question

Coud你帮我解决了我的麻烦：我用了Vue.js. 我的任务是：在base64中转换图像，然后发送到服务器。所以我在下面写了代码，但是出错了。当我调用函数 readfile 时，我收到了一个错误： enter image description here

错误是

＆＃34; this.bufferToBase64不是函数＆＃34;

我的HTML代码是：

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

我的方法是：

  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);
  }

接下来我将使用Element.io中的上传组件。但现在我有同样的错误。我的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>

我的方法：

  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();
}

有人能告诉我，请问我如何使用函数bufferToBase641吧？也许我对Element.io的行为不好？

Answer 1

您有范围问题。您丢失了对this的引用，因为您在嵌套函数中，它具有自己的this对象。改进您的代码：

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);
  };
},

您还可以使用箭头功能r.onload回调：

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);
  };
},

如何在VUE.js方法中使用函数中的params调用函数？

1 个答案: