[英]sending array data with multipart/form-data post request in Axios vue.js
[英]Vue js 2 & Axios Post Request - Form
我正在尝试使用 axios 发布我的表单,但我无法使用 expressjs 将数据发送到我的后端
这就是我正在做的:
<template>
<form class="" method="post" @submit.prevent="postNow">
<input type="text" name="" value="" v-model="name">
<button type="submit" name="button">Submit</button>
</form>
</template>
export default {
name: 'formPost',
data() {
return {
name: '',
show: false,
};
},
methods: {
postNow() {
axios.post('http://localhost:3030/api/new/post', {
headers: {
'Content-type': 'application/x-www-form-urlencoded',
},
body: this.name,
});
},
components: {
Headers,
Footers,
},
};
后台文件:
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
router.post('/new/post', (req, res) => {
res.json(console.log("this is working" + ' ' + req.body.name));
});
我收到的错误是:
this is working undefined
Axios post
格式:
axios.post(url[, data[, config]])
您的要求应该是:
axios.post('http://localhost:3030/api/new/post',
this.name, // the data to post
{ headers: {
'Content-type': 'application/x-www-form-urlencoded',
}
}).then(response => ....);
<template> <div id="content"> <h1>...</h1> <div> <label>Product Name</label> : <input type="text" id="txt1" v-model="model.productName" /> </div> <div> <label>Desciription</label> : <input type="text" id="txt2" v-model="model.descrption" /> </div> <div> <button type="button" v-on:click="saveClick">Save</button> </div> </div> <hr /> <hr /> <h1>...</h1> <table border="1" style="margin:auto"> <thead> <tr> <th style="width: 100px">ID</th> <th style="width: 100px">Product Name</th> <th style="width: 100px">Desciription</th> <th style="width: 100px"></th> </tr> </thead> <tbody> <tr v-for="item in model.list" v-bind:key="item.id"> <td>{{ item.id }}</td> <td>{{ item.productName }}</td> <td>{{ item.descrption }}</td> <td><button type="button" v-on:click="deleteClick(item.id)">Delete</button></td> </tr> </tbody> </table> </template> <script> import axios from "axios"; export default { name: "Product", data: function () { return { model: { productName: "", descrption: "", }, list: [], }; }, methods: { saveClick() { axios .post("http://example.com", this.model) .then((resp) => { this.getList(); alert("success" + resp.data.id); }); }, getList() { axios.get("http://example.com").then((resp) => { this.model.list = resp.data; }); }, deleteClick(id) { axios.delete("http://example.com" + id).then(() => { this.getList(); alert("success"); }); } }, mounted: function () { this.getList(); }, }; </script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.