关于批量上传音乐文件的解决方案（Vue项目）

需求

项目是vue项目，要求添加多个音乐文件，然后一次传递到后端

刚开始的想法是用一个数组(MusicList)包裹多个音乐对象传递到后端

[
    ...
	{
        album: File,
        music: File,
        lrc: File,
        name: string,
        artist: string,
        account: string,
        type: 0 或者 1
    }
    {
        album: File,
        music: File,
        lrc: File,
        ...
    }
    ...
]

目前通过input标签已经将多个音乐文件存放在uploadMusicList数组中

但是这个音乐对象中包含了文件，所以需要先遍历uploadMusicList，再使用FormData类，将每个对象中的所有数据添加到FormData中

let MusicList =[]
this.uploadMusicList.forEach(ele => {
	let formData = new FormData()
    formData.append("album", ele.album)
	formData.append("music", ele.music)
    ....
    
    ary.push(formData)
}

// axios
this.$http.post(
        `/music/file/uploadMusic/batch`,
        MusicList
      ).then(res => {
        console.log(res)
	})

所以现在发送请求的参数变成了一个数组包含多个FormData对象

[FormData, FormData, ...]

到现在看似一切都没毛病，但是后端那边完全收不到数据

查看控制台发现，FormData对象放在数组中，FormData中是没有内容的，后端当然也就接受不到

最后改了一下传递的参数的方式，如下

结论

// 传递的形式如下
// 除了上传的人的账号 其他均以数组形式传递 整一个是一个FormData对象
//{
//    albumList: [],
//    musicList: [],
//    lrcList: [],
//    nameList: [],
//    artistList: [],
//    typeList: []
//    account: string,
//}
    
// 具体实现
let formData = new FormData()

// uploadMusicList中存放了多个音乐对象
this.uploadMusicList.forEach(ele => {
  	formData.append("musicList", ele.music)
    formData.append("sizeList", ele.size)
    formData.append("albumList", ele.album)
    formData.append("lrcList", ele.lrc)
    formData.append("typeList", ele.musicType)
    formData.append("nameList", ele.name)  
})
formData.append("account", window.sessionStorage.getItem('account'))

// axios
this.$http.post(
        `/music/file/uploadMusic/batch`,
        formData
      ).then(res => {
        console.log(res)
	})