循环上传问题？

Question

想循环上传每个文件，循环第一次时isrepeat参数为true，拿到第一次循环上传成功后台返回的路径，作为往下循环的pathList，并且往下循环isrepeat参数为false，思路有点凌乱乱...

upload(data,action) {
      let formData = new FormData()
      data.forEach((item) => {
        formData.append('fileList', item)
        if (data.length === 1 || action === 'fileUpload') {
          //单文件
          formData.append('pathList', item.name)
        } else {
          formData.append('pathList', item.webkitRelativePath)
        }
        formData.append('pid', this.currentNodeKey)
        formData.append('isrepeat', true)
        this.$myHttp({
          method: 'post',
          url: this.prefix + '/doc/docDir/uploadHtml2Public',
          data: formData,
          headers: { 'Authorization': 'Sys ' + sessionStorage.getItem('token'), 'showLoading': 'true' }
        }).then((res) => {
          this.refreshTree()
        }).catch((error) => {
          console.log(error)
        })
        })
      
    }

Answer 1

代码没看明白，不过感觉本质上是一个根据当前请求的响应决定下次如何请求的问题，你看看下面的实例代码有帮助不

const items = [1, 2, 3];
const upload = (file) =>
  new Promise((resolve) => {
    setTimeout(() => {
      const data = items.pop();
      resolve(data);
    }, 1000);
  });

const request = async () => {
  const res = await upload();

  // 替换成你的业务判断
  if (res > 0) {
    console.log('res', res);
    request();
  }
};

request();

Answer 2

第 1 个问题，FormData 每次使用完没有清理

精简一下代码逻辑，大概是这样：

upload(data, action) {
    let formData = new FormData();
    data.forEach((item) => {
        formData.append("fileList", item);
        // 配置 formData
        // 在 myHttp() 中使用 formData
        // 但是，使用后没有清空，所以后面再进循环体的时候，会在之前的数据上添加
    });
}

所以，每次循环体都应该 new FormData()→配置→使用→抛弃，即

upload(data, action) {
    data.forEach((item) => {
        const formData = new FormData();
        formData.append("fileList", item);
        // 配置 formData
        // 在 myHttp() 中使用 formData
        // 因为是局部域内产生的 formData，出了这个作用域就会丢弃
    });
}

第 2 个问题，并非 one by one

myHttp 是一个异步处理过程，调用之后会立即执行下一条语句（与 .then 回调无关），并不会等异步结束。所以整个 forEach 应该会很快执行完成，然后多次文件上传基本上是同时在进行，而不是一个一个的在上传。如果要一个个上传，需要等每次异步结束，最好结合 await 使用 for 语句（forEach 方法不能实现异步等待）。示例：

async upload(data, action) {
  for (const item of data) {
    const formData = new FormData();
    // 配置 formData
    try {
      await this.$myHttp(...);
      this.refreshTree();
    } catch (err) {
      console.log("Error", err);
    }
  }
}

最后一个问题，refreshTree

真的是每上传一个文件就要 refreshTree 吗？是不是应该在循环完成之后再 refreshTree？这个不存在谁对谁错的问题，关键是业务需要是什么，以及 refreshTree 是否会对 data 造成影响，破坏迭代过程。