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

同一个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"

------------正 文 已 结 束， 感 谢 您 的 阅 读 （折雨的天空）--------------------

转载请注明本文标题和链接：《el-upload在一个页面多个上传标签的处理》