本身是个很简单的问题，问题是对前端不熟，对框架也不熟悉，所以出现此问题。

同一个form，多个文件上传标签，是多个标签，不是上传多个文件，如图：

多个标签的名称不一样。

直接上处理代码吧：

const submitForm = formEl => {

  if (!formEl) return;

  formEl.validate(valid => {

    if (valid) {

      // 多个 file 在一个接口同时上传

      const formData = createFormData(

        {

          siteName: validateForm.siteName, // 网站名称

          companyName: validateForm.companyName,

          siteKeys: validateForm.siteKeys,

          siteDesc: validateForm.siteDesc,

          icp: validateForm.icp,

          logo: validateForm.fileList.map(logoFile => ({ raw: logoFile.raw })),

          qrCode: validateForm.qrFile.map(qr => ({ raw: qr.raw })),

          qq: validateForm.qq,

          phone: validateForm.phone,

          email: validateForm.email,

          address: validateForm.address

        },

        {

          handleFile: ({ file, key, formData }) => {

            formData.append(subBefore(key, "["), file);

          }

        }

      );

      saveSetting(formData)

        .then(res => {

          if (res.code === 1) {

            message(`保存成功！`, {

              type: "success"

            });

          } else {

            message(`${res.msg}`, {

              type: "error"

            });

          }

        })

        .catch(error => {

          message(`提交异常 ${error}`, { type: "error" });

        });

    } else {

      return false;

    }

  });

};

关键代码是：

handleFile: ({ file, key, formData }) => {

            formData.append(subBefore(key, "["), file);

          }

参照是：

https://pure-admin-utils.netlify.app/utils/formData/formData

其中，如果没有关键代码部分的话，提交到后端的变量会被覆盖，默认都是file的名称。

另外，就是定义标签的时候，file-list这个必须是这个名字，我之前不熟悉，随便改一个名字，死活获取不到

v-model:file-list="validateForm.fileList"

就是这个地方的file-list，如果你也是一个不熟悉前端的人，那么很可能遇到和我一样的问题。