Javascript 上传HTML格式的图像并获取图像路径

我使用

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

{{imgUrl}}

var vm=新的Vue({
el:“#应用程序”，
数据：{
图：''
},
方法：{
changeFile（）{
let reader=new FileReader（）；
让file=this.$refs.file；
设image=this.$refs.image；
reader.readAsDataURL（file.files[0]）；
reader.onload=函数（e）{
设temp=this.result；
this.imgUrl=温度；
image.src=温度；
}
}
}
})

---

这是因为

这个

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

{{imgUrl}}

var vm=新的Vue({
el:“#应用程序”，
数据：{
图：''
},
方法：{
changeFile（）{
let reader=new FileReader（）；
让file=this.$refs.file；
设image=this.$refs.image；
//保留“this”供以后使用：
让thisComp=this；
reader.readAsDataURL（file.files[0]）；
reader.onload=函数（e）{
设temp=this.result；
此组件imgUrl=温度；
image.src=温度；
}
}
}
})  

---

在您的例子中，this指的是this所用函数的调用方（这里是

FileReader

对象

reader

），这就是为什么数据

imgUrl

根本没有更改的原因。

您想在其他地方使用base64数据吗？是的，我还想使用这个base64数据作为背景图像@Sebastian Waldbauery你的代码正在运行。您可以访问变量temp并使用函数将其发送到某处。是的，

可以工作，但

不显示背景图像，

不显示base64数据。如果查看元素，您将看到它们没有获取base64数据。如上图所示。@Sebastian Waldbauer