问题:
- 示例数据(json转一下)
{
"list": [
{
"key": "64f64d95ec274063a5c846b8aa25e363",
"type": "file-upload",
"label": "附件",
"model": "file-upload_64f64d95ec274063a5c846b8aa25e363",
"rules": [],
"options": {
"name": "file",
"rules": {
"enum": "",
"type": "any",
"message": "校验失败",
"pattern": "",
"trigger": "blur",
"fileSize": 50,
"required": false
},
"accept": "",
"action": "http://example.com/upload",
"method": "post",
"disabled": false,
"listType": "text",
"maxCount": 3,
"multiple": true,
"readonly": false,
"defaultValue": [],
"downloadModal": true,
"deleteFileList": [],
"uploadModalFile": [],
"_uploadModalFile": []
}
},
{
"label": "栅格布局",
"type": "grid",
"columns": [
{
"span": 12,
"list": [
{
"label": "账号",
"type": "input",
"options": {
"width": "100%",
"defaultValue": "",
"placeholder": "",
"maxlength": null,
"prefix": "",
"suffix": "",
"addonBefore": "",
"addonAfter": "",
"disabled": false,
"allowClear": false,
"readonly": false,
"rules": {
"trigger": "blur",
"enum": "",
"message": "校验失败",
"pattern": "",
"required": false,
"type": "any",
}
},
"key": "3fe48ec9f942499281d3176cfd0ab18e",
"model": "input_3fe48ec9f942499281d3176cfd0ab18e",
"rules": []
}
]
},
{
"span": 12,
"list": [
{
"label": "密码",
"type": "password",
"options": {
"width": "100%",
"defaultValue": "",
"placeholder": "",
"maxlength": null,
"prefix": "",
"suffix": "",
"addonBefore": "",
"addonAfter": "",
"visibilityToggle": true,
"disabled": false,
"allowClear": false,
"readonly": false,
"rules": {
"trigger": "blur",
"enum": "",
"message": "校验失败",
"pattern": "",
"required": false,
"type": "any"
}
},
"key": "e03af2ce074243aab941502ea981c239",
"model": "password_e03af2ce074243aab941502ea981c239",
"rules": []
}
]
}
],
"options": {
"gutter": 10,
"justify": "start",
"align": "top"
},
"key": "2c7bff2e9264444998e46b086952f9ac",
"model": "grid_2c7bff2e9264444998e46b086952f9ac",
"rules": []
}
]
}
- 代码
下面是我的数据处理方法
//将我上面的示例参数传进去,得到处理后的数据
this.setFileData(data)
async setFileData(data) {
let list = data.list
for (let index = 0; index < list.length; index++) {
if (list[index].type === "grid") {
list[index].columns.forEach(async (col: any) => await this.setFileData(col));
} else if(
(list[index].type === 'file-upload' || list[index].type === 'tableForm') &&
list[index].options._uploadModalFile.length > 0
) {
// 删除不需要的已上传附件
if (list[index].options.uploadModalFile.length > 0) {
list[index].options.deleteFileList = list[index].options.uploadModalFile.map(e => e.id)
}
this.handleDeleteFile(list[index].options.deleteFileList)
if(list[index].options._uploadModalFile.length > 0){
list[index].options.uploadModalFile = await this.uploadFile(list[index].options._uploadModalFile, list[index].type)
} else {
list[index].options.uploadModalFile = await this.uploadFile([], list[index].type)
}
// 上传完成后要将当前暂存的附件列表清空
list[index].options._uploadModalFile = []
}
}
}
uploadFile(fileList, type) {
if(fileList && fileList?.length > 0){
//handleFileData是附件上传数据处理,就不贴出来了
const fileInfo = this.handleFileData(fileList, type)
return new Promise(resolve => {
EventQueryApi.getFileUpload(fileInfo).then(function (res) {
resolve(res?.data?.entity);
})
});
} else {
return new Promise(resolve => resolve([]))
}
}
需求是要在最后一步调用上传接口,然后将上传借口返回的数据塞进原来的json中,最后再将整个json提交上去,我这里是想遍历原数据,将有附件的调用上传接口,这里uploadModalFile储存上传借口返回的数据;_uploadModalFile储存我这里上传组件暂存的附件数据,上传成功后这个要清空。但是没有达到我要的目的,递归过程中并没有全部把异步变成同步操作,最后发现是forEach的问题。
- 修改
async setFileData(data) {
let list = data.list
for (let index = 0; index < list.length; index++) {
if (list[index].type === "grid") {
// list[index].columns.forEach(async (col: any) => await this.setFileData(col));
for (let j = 0; j < list[index].columns.length; j++) {
await this.setFileData(list[index].columns[j])
}
} else if(
(list[index].type === 'file-upload' || list[index].type === 'tableForm') &&
list[index].options._uploadModalFile.length > 0
) {
// 删除不需要的已上传附件
if (list[index].options.uploadModalFile.length > 0) {
list[index].options.deleteFileList = list[index].options.uploadModalFile.map(e => e.id)
}
this.handleDeleteFile(list[index].options.deleteFileList)
if(list[index].options._uploadModalFile.length > 0){
list[index].options.uploadModalFile = await this.uploadFile(list[index].options._uploadModalFile, list[index].type)
} else {
list[index].options.uploadModalFile = await this.uploadFile([], list[index].type)
}
// 上传完成后要将当前暂存的附件列表清空
list[index].options._uploadModalFile = []
}
}
}
将forEach改成for循环就可以解决了,我怀疑可能是我forEach里又使用了async或者是forEach本身有问题,有大佬能知道可以给我解答一下