|
|
向后台接口传递FormData格式的数组对象
向后台接口传递FormData格式的数组对象在js中，new FormData()对象后，可以通过 append(name, value) 的方式往该对象中添加添加数据。然而append的值只能是字符串或者文件的格式，对于复杂的数组中包含对象的数据怎么添加呢？下面是我使用的方法：后台接口要求的入参格式：<input type="text" name="title"/><input
向后台接口传递FormData格式的数组对象
在js中，new FormData() 对象后，可以通过 append(name, value) 的方式往该对象中添加添加数据。然而append的值只能是字符串或者blob（File）格式，对于复杂的数组中包含对象的数据怎么添加呢？下面是我使用的方法：
后台接口要求的入参格式：
<input type="text" name="title"/>
<input type="file" name="file"/>
<input type="text" name="description"/><br/>
<input type="text" name="chapterList[0].title"/>
<input type="file" name="chapterList[0].file"/>
<input type="text" name="chapterList[0].description"/><br/>
<input type="text" name="chapterList[1].title"/>
<input type="file" name="chapterList[1].file"/>
<input type="text" name="chapterList[1].description"/>
此种数据相当于json格式的：
"title": "title",
"file": file,
"description": "description",
"chapterList": [
"title": "title0",
"file": file0,
"description": "description0"
"title": "title1",
"file": file1,
"description": "description1"
使用FormData处理如下：
// vue data中的数据
form： {
description: '',
file: null,
title: '',
// 动态添加部分数据
chapterList: [
title: '',
file: null,
description: ''
// 转Formdata格式数据处理
let data = new FormData()
data.append('description', this.form.description)
data.append('file', this.form.file)
data.append('title', this.form.description)
this.form.chapterList.forEach((item, i)=> {
data.append(`chapterList[${i}].title`, item.title)
data.append(`chapterList[${i}].file`, item.file)
data.append(`chapterList[${i}].description`, item.description)
最后将data放在接口的参数里传给后台就可以啦～
the end ～
