0

我想通过axios使用编程导航，但有时它不起作用。

我通过在使用 axios 之前使用路由解决了这个问题，而不是在.then作为发布请求的结果收到的语句中。

我想知道为什么这（在 athen中工作）不起作用。（我认为这是因为 Promise 对象，但我不确定）

有谁知道是什么问题？

这是我的FileUpload.vue代码片段

<template>
  <b-button @click="submitFile">submit</b-button>
</template>

<script>
export default {
  data() {
    return {
      image: null
    }
  }
  methods: {
    submitFile(){
      // ... handle form data

      // use axios for backend API
      axios.post(http://localhost:8000/api/upload/', formData, {
       headers: {'Content-Type': 'multipart/form-data'}
      }).then((res) => {
        console.log(res);
        this.$router.push({name: 'products'});  // not working!
      }).catch((err) => {
        console.log(err);
      });    
  }
}
</script>
4

1 回答 1

0

您的代码实际上有几个不同的问题。

首先，您的 POST 网址中缺少一个开头的单引号。其次，您只有一些一般的语法错误（假设给定的示例是您的真实代码）。

  1. 您需要在数据和方法定义之间使用逗号。
  2. 您在提交方法上完全缺少一个右花括号。

您的代码应该像这样更正：

export default {  
    data() {  
        return {
            image: null  
        }  
    },  
    methods: {  
        submitFile() {  
            axios.post('http: //localhost:8000/api/upload/', formData,{
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            })  
            .then((res) => {  
                console.log(res);  
                this.$router.push({  
                    name: 'products'  
                });  
            }).catch((err) => {  
                console.log(err);  
            });  
        }  
    }  
}
于 2020-02-28T09:24:14.490 回答