如何实现多文件循环上传以及如何处理每次上传结果影响后续上传?

小宇大大_1479

小宇大大_1479

2025-02-28

716人浏览

原创

多文件循环上传及结果处理方案

本文探讨如何实现多文件循环上传,并处理每次上传结果对后续上传的影响。 需求如下:用户需循环上传多个文件,第一次上传 isrepeat 参数为 true,获取返回路径信息;后续上传 isrepeat 为 false,并使用第一次上传返回的路径信息。

原方案存在逻辑缺陷:使用单次提交所有文件,并在函数内部循环处理,导致所有请求都带有 isrepeat=true。 路径信息获取及后续使用逻辑也不清晰。

改进方案采用异步操作和递归:

如何实现多文件循环上传以及如何处理每次上传结果影响后续上传?

改进代码:

AI舌诊面诊问诊医疗系统+诊疗商城系统源码
AI舌诊面诊问诊医疗系统+诊疗商城系统源码

AI 舌诊面诊问诊医疗系统 + 诊疗商城系统源码是一套结合 AI 辅助诊断与商品转化的健康类程序,基于浩创云、ThinkPHP(PHP)开发,支持微信服务号与 H5 端,适合做中医舌诊面诊问答、健康建议推送以及配套诊疗商品的运营。

下载
const items = []; // 文件列表
let pathList = []; // 已上传文件路径

const upload = async (file, isRepeat) => {
  const formData = new FormData();
  formData.append('fileList', file);
  formData.append('pathList', pathList.join(',')); // 路径列表作为字符串
  formData.append('pid', this.currentNodeKey);
  formData.append('isrepeat', isRepeat);

  try {
    const res = await this.$myHttp({
      method: 'post',
      url: this.prefix + '/doc/docDir/uploadHtml2Public',
      data: formData,
      headers: { 'Authorization': 'Sys ' + sessionStorage.getItem('token'), 'showLoading': 'true' }
    });
    pathList.push(res.path); // 将返回路径添加到 pathList (假设路径在 res.path)
    return res;
  } catch (error) {
    console.error('上传失败:', error);
    throw error; // 抛出错误,以便处理
  }
};

const uploadFiles = async () => {
  if (items.length === 0) return;

  const file = items.shift();
  const isRepeat = pathList.length === 0; // 第一次上传 isRepeat 为 true

  try {
    await upload(file, isRepeat);
    await uploadFiles(); // 递归上传下一个文件
  } catch (error) {
    // 错误处理,例如重试机制
    console.error('文件上传失败,请检查网络或文件:', error);
    // 可在此添加重试逻辑
  }
};

// 初始化 items 数组 (例如):
items.push(file1, file2, file3); // 将文件对象添加到数组中

uploadFiles(); // 开始上传

此方案中,upload 函数负责单个文件上传,uploadFiles 函数递归调用 upload 实现循环上传。pathList 存储已上传文件路径,isrepeat 参数根据 pathList 长度动态设置。 代码假设后台返回路径信息在 res.path 属性中,实际情况需根据后台接口调整。 需根据实际需求完善错误处理和重试机制。

This revised response maintains the original image and uses more descriptive language while restructuring the information for better clarity and flow. It also adds a more descriptive title and a placeholder for a flowchart image, which could be added if available.

相关专题

更多
while的用法
while的用法

while的用法是“while 条件: 代码块”,条件是一个表达式,当条件为真时,执行代码块,然后再次判断条件是否为真,如果为真则继续执行代码块,直到条件为假为止。本专题为大家提供while相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.25

354

5

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

2023.10.19

3208

3

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

2025.10.17

5169

12

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.29

3849

9

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

2026.01.19

486

15

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

60

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

40

15

Vite 项目目录怎么看
Vite 项目目录怎么看

Vite项目目录专题汇集入口文件、src源码、public静态资源、路径别名、项目根目录和构建输出目录相关的已审核文章,帮助读者理解各文件夹的用途与引用方式。

2026.10.28

140

10

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

2026.10.22

140

11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程