如何使用formdata上传多张图片

Question

let file = this.$refs.upFile.files
        console.log(file)
        let formData = new FormData()
        for (var i = 0; i < file.length; i++) {
          formData.append('file', file[i])
        }
        console.log(formData.get('file'))
//        formData.append('file', file)
        formData.append('types[]', 'main')
        const url = 'http://sylius.papamk.com/app_dev.php/api/files/'
        const config = {
          headers: {
            'Content-Type': 'multipart/form-data',
            'authorization': 'Bearer SampleToken'

          },
          method: 'POST',
          onUploadProgress: function (progressEvent) {
          }
        }
        axios.post(url, formData, config)

只能上传一张图片，怎么设置多张同时上传

Answer 1

我跟楼主的实现方式差不多，也是基于formdata的提交,我后台是基于php，之前用nodejs做的是单图片逐个上传，但是毕竟公司后端必须要php的上传方式，而且还需要在提交表单的时候统一上传，如果改成多图片基于楼主的方式。应该是写成这样。

      var formData = new FormData()
      // 自定义formData中的内容
      for (let i = 0; i < fileList.length; i++) {
        formData.append('file[]', fileList[i])
      }

最大区别应该是把append 的名称改为 file[] 吧

这是我的结果截图

后端就是稍微打印了下文件而已。

有关这方面的图片上传的代码，我会上传到github https://github.com/MontageD/m...
有兴趣的可以关注一下，谢谢

Answer 2

应该是后台没取多个？你看看network面板你前端是不是传输了多个

Answer 3

多张上传要改成formData.append("file[]", file[i])，input要加multiple;

Answer 4

F12看看header，如果是header只有1个图片文件就是自己的原因（没装入FormData），如果有多个但是报错就是后台的原因
我这里是java后台，做FormData接收的时候，文件是在一个数组里的。数组名xxx就是append(xxx,file[i]);

上传headers截图