Javascript TypeError:“输入错误”；设置仅getter属性vuejs axios

我想做什么： 将图像作为输入。将其转换为base64字符串。准备包含base64字符串的有效负载，并使用该post请求命中后端。获取响应数据，从响应对象预览base64图像

运行代码时，axios请求中出现以下错误：

TypeError:“设置仅getter属性”结果“”

仅供参考，

console.log（响应）

打印成功，我可以看到响应数据。 但是，

console.log（'SUCCESSFUL'）

由于错误而无法打印

<template>
  <div id="Uploader">
    <input type="file" id="file" ref="file" v-on:change="handleFileChanges" multiple/>
    <button v-on:click="upload_picture">Submit</button>
    <div> Hello {{result}}</div>
  </div>
</template>

<script>

import axios from 'axios';


export default {
  name: 'Uploader',

  data() {
    return {
      file: '',
      values: '',
      result: [],
    };
  },

  methods: {
    handleFileUpload() {
      [this.file] = this.$refs.file.files;
    },
    handleFileChanges(e) {
      const reader = new window.FileReader(); // if window i
      // s not used it says File READER is not defined
      reader.onload = function oldyfunt(event) {
        // dispatch fileAttached to state UI postEditor with event.target.result as read dataURL
        this.values = event.target.result;
        console.log('VALUES');
        console.log(this.values);
        const data = {
          images: {
            image1: this.values.split(',')[1],
          },
        };
        axios.post('http://0.0.0.0:9094/analyze',
          data,
          {
            headers: {
              'Content-Type': 'application/json',
            },
          }).then((response) => {
          console.log(response);
          this.result = response.data;
          console.log('SUCCESS!!');
        }).catch((error) => {
          console.log(error);
          console.log('FAILURE!!');
        });
      };
      reader.readAsDataURL(e.target.files[0]);
    },
    upload_picture() {
      console.log(this.values);
    },
  },
};
</script>

提交
你好{{result}
从“axios”导入axios；
导出默认值{
名称：'上传程序'，
数据（）{
返回{
文件：“”，
值：“”，
结果：[]，
};
},
方法：{
handleFileUpload（）{
[this.file]=此.$refs.file.files；
},
handleFileChanges（e）{
const reader=new window.FileReader（）；//如果window i
//未使用它表示未定义文件读取器
reader.onload=函数oldyfunt（事件）{
//将文件附加到状态UI postEditor，并将event.target.result作为读取数据URL
this.values=event.target.result；
console.log（'VALUES'）；
console.log（this.values）；
常数数据={
图像：{
image1:this.values.split（'，'）[1]，
},
};
轴心柱http://0.0.0.0:9094/analyze',
数据，
{
标题：{
“内容类型”：“应用程序/json”，
},
})。然后（（响应）=>{
控制台日志（响应）；
this.result=response.data；
console.log（'SUCCESS！！'）；
}).catch（（错误）=>{
console.log（错误）；
console.log（'FAILURE！！'）；
});
};
reader.readAsDataURL（e.target.files[0]）；
},
上传图片（）{
console.log（this.values）；
},
},
};

您不能在axios回调函数中使用此引用，您可以在方法中定义此函数并将其传递给axios：

方法：{
...
后请求（响应）{
控制台日志（响应）；
this.result=response.data；
console.log（'SUCCESS！！'）；
},
handleFileChanges（e）{
...
const afterPostRequest=this.afterPostRequest；
reader.onload=函数oldyfunt（事件）{
...
轴心柱http://0.0.0.0:9094/analyze',
...
).then（afterPostRequest）.catch（（错误）=>{
console.log（错误）；
console.log（'FAILURE！！'）；
});
};
...
},
...
},

尝试更改

reader.onload = function oldyfunt(event) {

借

它会解决你的问题

此

参考当前范围，在您的情况下

此

参考

oldyfunt

函数不

vue实例

---

您可以更深入地了解

箭头功能

，感谢分享。我试图修改代码，但仍然是个错误。错误“afterPostRequest”未定义不，对不起，我忘记了

const afterPostRequest=this.afterPostRequest行，我在调用this.afterPostRequest时编辑了应答，与未定义函数相关的错误得到解决，但函数未被触发，因为控制台语句未打印。当我使用const afterPostRequest=this.afterPostRequest更新代码时，我得到了对象解构错误；这把它修好了。谢谢这是否意味着此内部箭头函数指的是当前范围，并且在使用此函数时，范围会发生变化？是的
此
始终指的是当前范围，而箭头函数不定义范围，为什么
此
在本例中指的是
vue实例
，请检查此项以了解更多信息
reader.onload = (event) => {