Vue使用axios post方法发送json数据报415Unsupported Media Type

1.Vue使用axios post方法发送json数据

<template>
  <el-aside>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="审核选择">
        <el-switch
            v-model="form.status"
            active-text="审核通过"
            active-value="2"
            inactive-text="审核不通过"
            inactive-value="3"
            active-color="#13ce66"
            inactive-color="#ff4949">
        </el-switch>
      </el-form-item>

      <el-form-item label="处理原因">
        <el-input type="textarea" v-model="form.reason"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>

  </el-aside>
</template>

<script>
import axios from "axios";

export default {
  name: "StoreHandler",
  data() {
    return {
      form: {
        status: '2',
        reason: ''
      }
    }
  },

  methods: {
    onSubmit() {
      console.log(this)
      console.log(this.form.status)
      console.log(this.form.reason)
      console.log(this.$route.query.storeId)

      const jsons = {
        storeId:this.$route.query.storeId,
        status: this.form.status,
        reason: this.form.reason
      };

      let _this = this

      axios({
        method: 'post',
        url: 'http://localhost:1111/waimai/store/updateStoreStatusAndReason',
        data: JSON.stringify(jsons),
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        }
      }).then(function (res) {
        console.log(res)
        _this.$notify({
          title: '提交成功',
          message: '处理结果',
          type: 'success'
        })

        _this.$router.push({
          path:'/storeApplyList'
        })
      })
    },

    cancel() {
      this.$router.push({
        path: '/storeAppLyList'
      })
    }
  },
}
</script>

<style scoped>

</style>
posted @   LilyFlower  阅读(1051)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示