formdata文件作为字典传递参数

Question

问题遇到的现象和发生背景

js FormData中打算传递多文件参数
FormData中参数格式

{
    SandTableStyle: 1,
    videoList: [
        {
            file: file1,
            name: name1,
        },{
            file: file2,
            name: name2,
        },{
            file: file3,
            name: name3,
        }
    ]
}

问题相关代码，请勿粘贴截图

let data = new FormData();
data.append('SandTableStyle', 1)
this.videolist.forEach(
                (val, index) => {
                    console.log(val)
                    let tempdata = new FormData();
                    tempdata.append('file', val.raw);
                    tempdata.append('name', index)
                    data.append("videoList", tempdata)
                }
            );

运行结果及报错内容

无报错 列表中文件为空
运行结果是 FormData 里的二进制文件被序列化成 空object

我的解答思路和尝试过的方法

对同一个key进行FormData.append 可以解决列表的问题，主要是将文件及其他参数作为字典传递为空的问题

我想要达到的结果

发送文件作为字典参数进行传递

Answer 1

FormData不支持这种嵌套数据结构，直接将videoList中的file添加FormData中也是一样的。如果是图片可以canvas转为base64字符串就可以和示例中一样了，但是服务器端需要反序列化为2进制数据才能保存为文件。

改成下面这样就行了。不知道题主什么服务器端语言，asp.net webform或者mvc可以用过Request.Files获取所有提交的图片。其他语言应该也有类似的获取所有文件的方法。没有统一获取的，可以给FormData添加filecount参数标记有几个文件，服务器端通过filecount遍历进行组合文件的键名称来落去

    let data = new FormData();
    data.append('SandTableStyle', 1);
    data.append('filecount', this.videolist.length);
    this.videolist.forEach((val, index) => {
        data.append('file' + index, val.raw);
        // console.log(val)
        //let tempdata = new FormData();
        //tempdata.append('file', val.raw);
        // tempdata.append('name', index)
        // data.append("videoList", tempdata)
    }
    );

有其他问题可以继续交流~