以HTML格式上传图片并获取图片路径

Question

我使用<input type="file" accept="image/*">在FileReader实例的onload回调函数中上载了图像和图像的base64编码，此操作成功完成。但是，当我将此base64编码分配给另一个数据变量时，它会失败，并且无法获取其值。这是为什么？你可以帮帮我吗？谢谢！

<div id="app">
  <input type="file" accept="image/*" @change="changeFile" ref="file">  
  <img :src="imgUrl" ref="image">
  <div :style="{background: 'url(' + imgUrl + ')'}"></div>
  <p>{{imgUrl}}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    imgUrl: ''
  },
  methods: {
    changeFile() {
      let reader = new FileReader();
      let file = this.$refs.file;
      let image = this.$refs.image;
      reader.readAsDataURL(file.files[0]);
      reader.onload = function(e) {
        let temp = this.result;
        this.imgUrl = temp;
        image.src = temp;
      }
    }
  }
})

Answer 1

这是因为this是JS世界中的坏孩子：

<div id="app">
  <input type="file" accept="image/*" @change="changeFile" ref="file">  
  <img :src="imgUrl" ref="image">
  <div :style="{background: 'url(' + imgUrl + ')'}"></div>
  <p>{{imgUrl}}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    imgUrl: ''
  },
  methods: {
    changeFile() {
      let reader = new FileReader();
      let file = this.$refs.file;
      let image = this.$refs.image;

      // keep the "this" for later use:
      let thisComp = this;

      reader.readAsDataURL(file.files[0]);
      reader.onload = function(e) {
        let temp = this.result;
        thisComp.imgUrl = temp;
        image.src = temp;
      }
    }
  }
})  

在您的情况下，this引用了使用过this的函数的调用者（这里是FileReader对象reader），这就是为什么数据{ {1}}完全没有改变。