vue2中普通methods中无法访问this，换成箭头函数解决

vue2中的methods，在onProgress函数中如何获取和修改data中的变量。完整代码如下，报错访问不到data中的totalUploadedSize 变量：

tusUpload(files) {
      var file = files[0];
      var upload = new tus.Upload(file, {
        onProgress: function (bytesUploaded, bytesTotal) {
          var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2)
          this.totalUploadedSize += bytesUploaded
          // 箭头
        },
      })

在 Vue 2 中，如果你想在 onProgress 函数中访问并修改 data 中的变量，你需要使用 this 来引用 Vue 实例的 data。但是，由于 onProgress 是一个普通的 JavaScript 函数，它没有直接访问 Vue 实例的上下文，因此你需要通过 bind() 或箭头函数来确保正确的 this 上下文。

修改后的代码示例

methods: {
  tusUpload(files) {
    // 获取选择的文件
    var file = files[0];
    var upload = new tus.Upload(file, {
      // 上传进度回调
      onProgress: (bytesUploaded, bytesTotal) => {  // 使用箭头函数，确保 `this` 指向 Vue 实例
        var percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
        this.totalUploadedSize += bytesUploaded;  // 使用 `this` 来修改 Vue 实例中的数据
        console.log(this.totalUploadedSize);  // 输出更新后的 `totalUploadedSize`
      },
    });

}

关键点

1. 箭头函数 onProgress：在 onProgress 中，使用箭头函数 () => {} 来确保 this 指向 Vue 实例，从而能够访问和修改 Vue data 中的变量（比如 this.totalUploadedSize）。

2. 通过 this 访问和修改数据：在 onProgress 中，this.totalUploadedSize 用于获取和修改 Vue 实例中的 totalUploadedSize。如果不使用箭头函数或 bind()，this 会指向 onProgress 函数的上下文，而不是 Vue 实例。

3. 使用 this.$refs 访问 DOM 元素：你在 myupload.uploadedSize 中使用了 this.$refs.MyUploader 来访问 Vue 模板中的 DOM 元素。

总结

通过使用箭头函数确保 this 正确指向 Vue 实例，你可以在 onProgress 函数中访问并修改 data 中的变量。如果你不想使用箭头函数，也可以使用 bind() 来显式绑定 this，但箭头函数更为简洁。