VueJS上传前图片缩放问题：箭头函数与this指向及方法调用异常

我来帮你一步步捋清楚这个问题，你的核心困扰其实是JavaScript异步操作的执行顺序和this指向的绑定，咱们逐个解决：

1. 修复this.addimage()调用时的this丢失问题 #

你代码里的image.onload用的是普通函数，这里面的this默认会指向当前的image元素，而不是Vue组件实例，所以自然调用不了this.addimage()，也访问不到this.imgpath这类组件变量。

解决方法很简单：把image.onload的普通函数改成箭头函数，箭头函数会继承外层作用域的this，也就是Vue组件实例，这样就能正常调用组件方法和访问组件变量了。

2. 搞懂reader.readAsDataURL(file)的逻辑 #

你猜的完全没错，这个方法是关键！它的作用是：

• 异步读取你选中的本地文件（因为浏览器不能直接访问本地文件，必须通过FileReader API读取）
• 把文件内容转换成base64编码的DataURL字符串（比如data:image/png;base64,xxxxxx...）
• 读取完成后触发reader.onload回调，此时e.target.result就是这个DataURL，你可以把它赋值给<img>做预览，也传给Image对象进行缩放处理。

这个过程是异步的，所以你不能在reader.readAsDataURL()外面直接调用this.addimage()——这时候文件还没读完，所有处理都没开始，自然无效。

3. 确保所有处理完成后再调用addimage #

图片缩放依赖Image对象的加载（因为要等DataURL加载完才能获取原图的宽高），而Image.onload也是异步的，所以必须在这个回调的最后，也就是canvas缩放完成、this.imgpath更新完毕后，再调用this.addimage()，这样才能保证所有数据都准备好。

修改后的完整代码 #

我帮你修正了所有问题点，标注了关键修改：

<template>
<div>
<div>
<form class="form" v-on:submit.prevent>
<div class="center msb-i" style="font-size: 150%">{{$t('imgupload')}}</div>
<div>
<input type="file" v-on:change="onImageChange">
</div>
<img :src="imgpath" :id="mode+'id'">
<div v-if="imgpath!='' && !imageuploaded" class="spinner-border center" role="status">
<span class="sr-only">Loading...</span>
</div>
<div v-if="imageuploaded">{{$t('btn.'+mode+'up')}}</div>
</form>
</div>
</div>
</template>

<script>
export default {
// 补充data选项，初始化响应式变量
data() {
  return {
    imgpath: '',
    imgext: 'png', // 根据实际文件类型调整
    imageuploaded: false,
    id: '', // 组件需用到的id变量，记得初始化
    mode: '' // 组件需用到的mode变量，记得初始化
  }
},
methods: {
onImageChange(e) {
  // 修正变量名：定义的是files，后续调用统一用files
  let files = (e.target.files || e.dataTransfer.files)[0];
  let reader = new FileReader();
  reader.onload = (e) => {
    this.imgpath = e.target.result;
    var image = new Image();
    image.src = e.target.result;
    // 关键修改1：改用箭头函数绑定Vue实例的this
    image.onload = () => {
      var maxWidth = 1024, maxHeight = 1024, imageWidth = image.width, imageHeight = image.height;
      if (imageWidth > imageHeight) {
        if (imageWidth > maxWidth) {
          imageHeight *= maxWidth / imageWidth;
          imageWidth = maxWidth;
        }
      } else {
        if (imageHeight > maxHeight) {
          imageWidth *= maxHeight / imageHeight;
          imageHeight = maxHeight;
        }
      }
      var canvas = document.createElement('canvas');
      canvas.width = imageWidth;
      canvas.height = imageHeight;
      var ctx = canvas.getContext("2d");
      // 修正drawImage参数：直接传计算后的宽高，无需修改原image的尺寸
      ctx.drawImage(image, 0, 0, imageWidth, imageHeight);
      // 更新缩放后的图片路径
      this.imgpath=canvas.toDataURL("image/"+this.imgext);
      // 现在this指向正确，可正常调用上传方法
      this.addimage();
    };
  };
  // 关键修改2：修正变量名，传入正确的文件对象
  reader.readAsDataURL(files);
},
addimage(){
  var path='';
  var urlpath="/newpicpath/";
  // 关键修改3：修正axios语法错误，补充错误捕获逻辑
  axios.get(urlpath+this.id).then(response => {
    path="." + response.data + "."+this.imgext;
    axios.post('/uploadfile',{image: this.imgpath, path:path})
    .then(() => {
      // 上传完成后更新状态，切换页面提示
      this.imageuploaded = true;
    })
    .catch(err => {
      console.error('图片上传失败:', err);
    })
  })
  .catch(err => {
    console.error('获取上传路径失败:', err);
  })
}
}
}
</script>

另外补充两个小细节：

• 组件的响应式变量必须在data选项中初始化，否则无法被Vue追踪更新
• 异步请求要加上错误捕获，避免出问题时没有任何提示信息

内容的提问来源于stack exchange，提问作者Maxiss