首页 > 其他分享 >ant design vue 上传文件自定义上传,并发上传文件、取消上传、重新上传

ant design vue 上传文件自定义上传,并发上传文件、取消上传、重新上传

时间:2024-09-03 18:23:10浏览次数:14  
标签:文件 const uid 自定义 value item file 上传

ant design vue 上传文件组件

<a-upload-dragger
   v-model:fileList="fileList"
   :accept="accept"
   :beforeUpload="beforeUploadFile"
   class="upload-btn"
   :headers="headers"
   multiple
   @change="handleChange"
>
   <button v-if="!showUploadFiles" class="submitbtn">点击上传</button>
   <button v-else class="submitbtn">继续上传</button>
</a-upload-dragger>
<div v-else class="file-list">
  <div class="file-item" v-for="(item,index) in uploadFileList" :key="index">
    <span class="fileName">{{ item.file?.name}}</span>
    <span class="fileSize">{{ sizeCompt(item.file?.size) || 0 }}</span>
    <span :class="{'error-statue':item.status=='error','loading-status':item.status=='uploading'}">{{ item.status=='error'?'上传失败,请重试' : item.status=='uploading'?'上传中':''}}</span>
    <div class="svg" v-show="item.status=='uploading'">
        <img src="@/assets/images/uploading.gif" alt="">
    </div>
    <div class="svg">
        <svg xmlns="http://www.w3.org/2000/svg" v-if="item.status=='done'" viewBox="0 0 18 18" fill="none">
            <image href="@/assets/images/svg/uploadSuccess.svg" x="0" y="0"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" v-else-if="item.status=='error'" viewBox="0 0 18 18" fill="none" @click="reupload(item)">
            <image href="@/assets/images/svg/reupload.svg" x="0" y="0"/>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" v-else viewBox="0 0 18 18" fill="none" @click="cancelUpload(item)">
            <image href="@/assets/images/svg/cancelUpload.svg" x="0" y="0"/>
        </svg>
      </div>
  </div>
  // 上传文件部分
  const accept = ref(
    ".ppt,.pps,.jpeg,.jfif, .pot, .ppa,.pptx,.ppsx,.potx,.doc,.docx,.docm,.dot,.docx,.xlsx,.xls,.csv,.xlsb,.xltx,.xltm,.xlam,.mp4,.flv,.f4v,.webm,.mpeg,.mov,.wmv,.pdf,.txt,.zip,.rar,.7z,.tar,.gz,.tiff,.png,.psd,.raw,.svg,.eps,.jpg,.raw,.ai,.gif"
  );
  //文件列表
  const fileList = ref([]);
  //请求头
  const headers = {
    token: ls.get("token"),
    "content-type": "multipart/form-data",
  };

上传文件前操作

  // 上传文件之前的钩子,参数为上传的文件
  const beforeUploadFile = (file, fileLists) => {
    console.log("拿到的文件列表", file, fileList.value);
    //判断文件大小是否超过剩余空间
    // if(file.size>diskData.value.free){
    //     message.warning('您的存储空间不足')
    //     return false
    // }
    // 限制文件类型
    // const fileNames = file.name.split('.')
    // const fileType = fileNames[fileNames.length - 1].toLocaleLowerCase()
    // const extList = ['jpg','jpeg', 'png', 'gif','ppt','word','excel','mp4','pdf','txt','doc','docx','zip','exe','bat','vbs']
    // if (!extList.find((item) => item == fileType)) {
    //   this_.$message.error('不能上传.'+fileType+'类型的文件!')
    //   return false
    // }
    // console.log(888)
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      uploadFiles(fileLists);
    }, 500);
    return false;
  };

上传文件列表时:使用防抖避免重复调用上传函数

并发请求

// 并发请求
const concurrency = async (promiseList, max) => {
  let index = 0;
  const results = new Array(promiseList.length);
  const executing = [];
  const runCurrency = async () => {
    if (index == promiseList.length) {
      return;
    }
    const currencyIndex = index++;
    const currency = promiseList[currencyIndex];
    const p = currency()
      .then((result) => {
        results[currencyIndex] = result;
        executing.splice(executing.indexOf(p), 1);
      })
      .catch((error) => {
        results[currencyIndex] = error;
        executing.splice(executing.indexOf(p), 1);
      });
    executing.push(p);
    let r = Promise.resolve;
    if (executing.length >= max) {
      r = Promise.race(executing);
    }
    await r;
    await runCurrency();
  };
  await runCurrency();
  await Promise.all(executing);
  getDiskFileList();
  return results;
};
详细解析
  • index:用于跟踪当前处理的 promise 索引。
  • results:存储每个 promise 的结果。
  • executing:用于跟踪当前正在执行的 promise。
runCurrency 函数
  • 如果所有 promise 都已执行完毕,则返回。
  • 否则,获取当前的 promise,并将其执行。
  • 使用 Promise.race 控制并发,确保同时只执行 max 个 promise。
  • 递归调用 runCurrency 以处理下一个 promise。

上传函数

// 上传函数
const uploadFiles = async (fileLists) => {
  fileList.value = fileLists.map((item, index) => {
    const { uid } = item;
    return {
      uid,
      file: item,
      status: "init",
    };
  });
  showUploadFiles.value = true;
  uploadFileList.value.push(...fileList.value);
  console.log(2345, uploadFileList.value, fileList.value);
  const promitList = uploadFileList.value.map((item) => {
    return async () => {
      // 限制文件类型
      const fileNames = item.file?.name.split(".");
      const fileType =
        fileNames[fileNames.length - 1].toLocaleLowerCase();
      const extList = [
        "tiff",
        "jpeg",
        "jfif",
        "png",
        "psd",
        "raw",
        "svg",
        "eps",
        "jpg",
        "raw",
        "ai",
        "gif",
        "ppt",
        "pps",
        "pot",
        "ppa",
        "pptx",
        "ppsx",
        "potx",
        "doc",
        "docx",
        "docm",
        "dot",
        "dotx",
        "xlsx",
        "xls",
        "csv",
        "xlsb",
        "xltx",
        "xltm",
        "xlam",
        "mp4",
        "flv",
        "f4v",
        "webm",
        "mpeg",
        "mov",
        "wmv",
        "mp3",
        "wma",
        "wav",
        "ape",
        "flac",
        "ogg",
        "aac",
        "pdf",
        "txt",
        "zip",
        "rar",
        "7z",
        "tar",
        "gz",
      ];
      if (!extList.find((item) => item == fileType)) {
        item.status = "wrong";
        return false;
      }
      const formData = new FormData();
      formData.append("files", item.file);
      item.status = "uploading";
      console.log(formData, item.file);
      try {
        await requploadFiles(window, item.uid, formData);
        item.status = "done";
        diskStore.getGroup();
        getDiskFileList();
        diskStore.getDiskMemory();
      } catch (error) {
        message.error(error.message);
        item.status = "error";
      }
      // uploadFileList.value=uploadFileList.value.map((i)=>{
      //     if(i.uid==item.uid){
      //         i.status=item.status
      //     }
      //     return item
      // })
      // console.log('after',uploadFileList.value)
      // uploadFileList.value=uploadFileList.value.filter((fileItem)=>fileItem.uid!=item.uid)
      // console.log('before',uploadFileList.value)
    };
  });
  concurrency(promitList, 6);
};
详细解析
  • fileList.value:将传入的文件列表映射为具有 uidfile 和 status 属性的对象数组。
  • showUploadFiles.value:显示上传文件的状态。
  • promitList:存储每个文件的上传逻辑,返回一个 async 函数。
文件类型检查和上传
  • 检查文件类型是否在允许的扩展名列表中。
  • 使用 FormData 构造上传请求的主体。
  • 根据上传结果更新文件的状态,并在上传成功或失败时进行相应的处理

重新上传

// 重新上传
const reupload = async (item) => {
  console.log("reupload");
  const formData = new FormData();
  formData.append("files", item.file);
  uploadFileList.value.map((i) => {
    if (i.uid == item.uid) {
      i.status = "uploading";
    }
  });
  try {
    await requploadFiles(window, item.uid, formData);
    uploadFileList.value.map((i) => {
      if (i.uid == item.uid) {
        i.status = "done";
      }
    });
    diskStore.getGroup();
    getDiskFileList();
    diskStore.getDiskMemory();
  } catch (error) {
    message.error(error.message);
    uploadFileList.value.map((i) => {
      if (i.uid == item.uid) {
        i.status = "error";
      }
    });
  }
};

取消上传

// 取消上传
const cancelUpload = (item) => {
  console.log("cancle");
  if (typeof window?.[item.uid] === "function") {
    window?.[item.uid]("请求中断");
  }
};

文件状态回调

// 文件状态改变的回调——上传中、完成、失败都会调用这个函数。
const handleChange = (info) => {
  if (info.file.status !== "uploading") {
    console.log(info.file, info.fileList);
  }
  if (info.file.status === "done") {
    message.success(`${info.file.name} file uploaded successfully`);
    // diskStore.getDiskMemory()
  } else if (info.file.status === "error") {
    message.error(`${info.file.name} file upload failed.`);
  }
};

标签:文件,const,uid,自定义,value,item,file,上传
From: https://blog.csdn.net/m0_56772756/article/details/141868348

相关文章

  • 【ELF系列】一文手撕ELF文件
    一、ELF文件是什么二、ELF可重定位文件2.1.shstrtab和.strtab2.2.rel.text和.symtab2.3.text节三、ELF可执行文件四、参考原创嵌入一下?谦益行在一文了解ECU软件刷写文件HEX和S19格式(qq.com)中介绍汽车控制器的刷写软件的格式,不管是编译生成的目......
  • PHP 代码示例 拷贝文件夹目录下的所有子目录及文件到另一个文件夹目录
    PHP 拷贝文件夹目录下的所有子目录及文件到另一个文件夹目录:调用示例:$srcFolder="C:/www/upload/src";$dstFolder="C:/www/upload/dst";$this->recurseCopy($srcFolder,$dstFolder);functionrecurseCopy($src,$dst){$dir=o......
  • Openwrt中挂载NTFS格式USB硬盘无法正常显示中文目录及文件的解决办法
    在试图挂载硬盘使用alist作视频站的时候,我发现Openwrt访问自动挂载上的USB硬盘目录时,只能看得到英文的目录和文件。这就是固件自动挂载不太灵光的地方了自动挂载是Openwrt导航栏-系统-挂载点的[自动挂载磁盘]选项与[挂载已连接的设备]按钮。平常不想动手敲命令的时候固然很方便,但......
  • 人工智能大语言模型技术发展研究报告(2024年)|附49页PDF文件下载
    前言人工智能作为引领新一轮科技产业革命的战略性技术和新质生产力重要驱动力,正在引发经济、社会、文化等领域的变革和重塑,2023年以来,以ChatGPT、GPT-4为代表的大模型技术的出台,因其强大的内容生成及多轮对话能力,引发全球新一轮人工智能创新热潮,随着大模型技术演进、产品迭代日新......
  • Flink 配置文件的深度解读
    Flink配置文件的深度解读目标通过了解FApacheFlink的配置文件(flink-conf.yaml),掌握Flink正确用法能快速定位生产环境问题以及做好生产实践的规划Flink配置文件的深度解读,包括各个配置项的意义和作用,以及它们的默认值。Flink配置文件概述Flink配置文件(fl......
  • Python的10个文件对比与合并高效策略
    文末赠免费精品编程资料~~在日常编程或数据分析工作中,经常需要处理多个文件的对比与合并任务。Python因其强大的文件处理能力和丰富的库支持,成为了处理这类任务的理想选择。下面,我们将逐步探索10种高效的文件对比与合并策略,每一步都配有详细的代码示例和解释。1.基础文件读......
  • PbootCMS 后台常用文件修改路径位置
    在PbootCMS中,后台常用文件通常保存在 apps\admin\view\default 目录中。以下是常用的几个文件及其路径,这些文件在使用过程中可能需要修改一些文字内容。以下是具体的文件路径和用途说明:1.登录页页面修改文件路径:plaintext apps\admin\view\default\index.html用途......
  • 神笔上货:多多上货软件,智能标题防比价,券前接口上传无需解析
    图片:神笔马良文章:喵喵喵作者:yunchang227随着电子商务的蓬勃发展,越来越多的商家选择在各大平台上开设店铺,进行商品销售。然而,如何在竞争激烈的市场中脱颖而出,成为了每个商家都面临的挑战。神笔上货作为一款专为商家打造的上货工具,凭借其强大的功能特点,成为了众多商家的得力助......
  • php 把文件加入到现有的zip压缩包中
    //指定要添加的文件和已有的压缩包名称$fileToAdd=public_path().'pdffile/file1.txt';//要添加的文件$zipFileName=public_path().'pdfzip/archive.zip';//已有的压缩包名称//创建一个新的ZIP档案对象$zip=newZipArchive();......
  • php 创建压缩包zip,并将指定文件放入zip中
    目前用的是tp6框架//指定要压缩的文件和压缩包的名称$filesToZip=[public_path().'pdffile/生物样本库-原件.pdf'];//要压缩的文件列表$zipFileName=public_path().'pdfzip/archive.zip';//压缩包名称//创建一个新的ZIP档案$zip=......