数据段变量取不到API响应值（response.data）

Question

我访问 API 以上传图片，并 return 使用 Vue 应用上传图片 URL。我想在数据部分中将 API 响应值设置为 imgUrl1。我确定在控制台中得到了正确的响应，但 imgUrl1 仍然是空的。有人知道吗？？非常感谢！

Vue

data () {return 
 {
 imgUrl1:'',→empty
 }
},
methods: {
  uploadFile1: function () {
      var img_file1 = this.$refs.img1.files[0]
      var params = new FormData()
      params.append('image', img_file1)
      params.append('client_name', this.tableSelected)
      axios.post("http://127.0.0.1:5000/", params
      ).then(function (response) {
        console.log(response.data)→image url exists
        this.imgUrl1 = response.data
      }).catch(function (error) {
        for(let key of Object.keys(error)) {
        console.log(key);
        console.log(error[key]);
        }
      });
}

console.log(response.data)

https://storage.googleapis.com/dashboard_chichat/img/クライアント名/xxxxxxxxnQSkX6Wudy.jpg

Answer 1

尝试在您的 then 回调中使用箭头函数，这样 this 的值就是您的 Vue 组件。

methods: {
  uploadFile() {
    ...
    axios.post('', params)
      .then((response) => {
        this.imgUrl1 = response.data
      })
  }
}

没有箭头函数的等价物是：

methods: {
  uploadFile() {
    ...

    const _this = this;

    axios.post('', params)
      .then(function (response) {
        _this.imgUrl1 = response.data        
      })
  }
}

数据段变量取不到API响应值（response.data）

Variable in data section can't get API response value （response.data)

flask

vue.js