折雨的天空

博客介绍:本博客当前共有文章【962】篇,总阅读量【5,095,830】次,第一篇博客发表于【2011年04月06日 10时34分】,距今已【4939】天,感谢您的使用!

您的位置:折雨的天空 >其他技术> el-upload在一个页面多个上传标签的处理

el-upload在一个页面多个上传标签的处理

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

同一个form,多个文件上传标签,是多个标签,不是上传多个文件,如图:

微信图片_20240829095944.png


多个标签的名称不一样。

直接上处理代码吧:


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,如果你也是一个不熟悉前端的人,那么很可能遇到和我一样的问题。

------------正 文 已 结 束, 感 谢 您 的 阅 读 (折雨的天空)--------------------

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

奖励一下

取消

分享不易,烦请有多多打赏,如您也困难,点击右边关闭即可!

扫码支持
扫码打赏,5元,10元,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

-秒后自动关闭,如已打赏,或者不愿打赏,请点击右上角关闭图标。

发表评论

路人甲 表情
看不清楚?点图切换