如何使用表单中的数据创建Json

Question

我最近开始做一个项目，管理员可以通过填写表格在线创建旅游。通过填写表格，将介绍的信息引入Mongoose Schema并创建JSON。

在createcontent.js文件中，我使用new FormData();从表单中获取数据，因为为了上传图像，我使用了一个模块调用multer。

const createTour_form = document.querySelector('.form-create__tour');
if (createTour_form) {
createTour_form.addEventListener('submit', (cr) => {
cr.preventDefault();
const create = new FormData();
// Name
create.append('name', document.getElementById('tour_name').value);
//Tour Duration
create.append('duration', document.getElementById('tour_duration').value);
//Number Participoants
create.append('maxGroupSize', document.getElementById('tour_participants').value);
//Tour Difficulty
create.append('difficulty', document.getElementById('tour_difficulty').value);
//Tour Price
create.append('price', document.getElementById('tour_prices').value);
//Short Description
create.append('summary', document.getElementById('tour_short_des').value);
//Description
create.append('description', document.getElementById('tour_long_des').value);
createTour(create);
})
}

我使用一个模块slugify将旅游名称转换为我在url中使用的slug。这是我的猫鼬模式：

const tourchema = new mongoose.Schema({
name: {
type: String,
require: [true, 'A tour mush have a name'],
unique: true,
trim: true,
maxlength: [50, 'A tour name must have less or equal then 50 characters'],
minlength: [10, 'A tour name must have more or equal then 10 characters'],
//validate:[validator.isAlpha, 'Tour name must only contain characters']
},
slug: {
formType: String
},
duration: {
type: Number,
require: [true, 'A tour must have a duration']
},
maxGroupSize: {
type: Number,
require: [true, 'A tour must have a group size']
},
difficulty: {
type: String,
require: [true, 'A tour must have a difficulty'],
enum: {
values: ['easy', 'medium', 'difficult'],
message: 'Difficulty is either: easy, medium, difficult'
}
},
ratingsAverage: {
type: Number,
default: 4.5,
min: [1, 'Raiting must be above 1.0'],
max: [5, 'Raiting must be below 5.0'],
set: val => Math.round(val * 10) / 10
},
ratingsQuantity: {
type: Number,
default: 0
},
price: {
type: Number,
require: [true, 'A tour must have a price']
},
priceDiscount: {
type: Number,
validate: {
validator: function (val) {
//his only points to create doc on new document creation
return val < this.price;
},
message: 'Discount price ({VALUE}) shoud be below the regular price'
}
},
summary: {
type: String,
trim: true,
require: [true, 'A tour must have a description']
},
description: {
type: String,
trim: true
},
imageCover: {
type: String,
require: [true, 'A tour must have a cover image']
},
images: [String],
createdAt: {
type: Date,
default: Date.now()
},
startDates: [Date],
secretTour: {
type: Boolean,
default: false
},
startLocation: {
//GeoJSON
type: {
formType: String,
default: 'Point',
enum: ['Point']
},
coordinates: [Number],
adress: String,
description: String
},
locations: [
{
type: {
type: String,
default: 'Point',
enum: ['Point']
},
coordinates: [Number],
adress: String,
description: String,
day: Number
}
],
// guides:Array
guides: [
{
type: mongoose.Schema.ObjectId,
ref: 'User'
}
]
}
tourchema.index({ slug: 1 });
tourchema.pre('save', function (next) {
this.slug = slugify(this.name, { lower: true });
next();
});

当我从表单上传数据时，unsign axios winth异步函数：

import axios from 'axios';
import { showAlert } from './alert';
export const createTour = async(data)=>{
try{
const create_tour = await axios({
method:'POST',
url:'http://127.0.0.1:3000/api/v1/tours',
data:data
});
}
catch(err){
console.log(err);
showAlert('error',err.response.data.message); 
}
}

当引用操作发生时，出现错误slugify:string参数应为我在互联网上没有找到任何关于此错误的信息。我试图构建自己的函数来替换模块，但没有成功——没有解决方案来解决这个错误吗？？

Answer 1

您可以将；FormData"；到对象，然后对其进行解析。

function formDataToObj(formData) {
let obj = {};
for (let key of formData.keys()) {
obj[key] = formData.get(key)
}
return obj;
}

示例：

function formDataToObj(formData) {
let obj = {};
for (let key of formData.keys()) {
obj[key] = formData.get(key)
}
return obj;
}

const fd = new FormData()
fd.append('a', 1)
fd.append('b', 2)
const obj = formDataToObj(fd)
console.log( obj )
const json = JSON.stringify( obj )
console.log( json )

更新：一个更好的方法是使用像这样的原生方式：

Object.fromEntries(formData.entries())

示例：

const fd = new FormData()
fd.append('a', 1)
fd.append('b', 2)
const obj = Object.fromEntries(fd.entries())
console.log( obj )
const json = JSON.stringify( obj )
console.log( json )