antd-vue - - - - - upload组件的使用

最新推荐文章于 2025-05-08 14:59:35 发布

Dark_programmer

最新推荐文章于 2025-05-08 14:59:35 发布

阅读量674

点赞数

分类专栏： antd-vue 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Dark_programmer/article/details/131204865

版权

antd-vue 专栏收录该内容

16 篇文章

订阅专栏

该文章详细介绍了upload组件的使用，包括file列表、上传参数、回调函数如before-upload和change，以及如何处理上传状态和文件信息。在beforeUpload中检查文件类型，在handleChange中更新fileList并处理上传成功或失败的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

upload组件的使用

参数说明：
file:list : 上传列表数据
name: 上传时的key
data: 上传时额外的参数
header: 上传列表数据
actions: 上传接口地址
before-upload: 上传之前的回掉
change: 传文件改变时

在这里插入图片描述

// 变量定义
      updateData: { billId: "", fileType: "" },
      uploadLoading: false, // 是否正在上传
      loading: false,
      readonly: true,
      headers: { Authorization: localStorage.getItem("token") },
      action: "https://a.abc.com/api/file/uploadFile", // 上传地址
      accept: `.png, .jpg, .jpeg, .doc, .docx, .xls, .xlsx, .pdf`, // 拼接图片格式和需要支持的文件格式
      fileList: [],
  ...
  ...
  // 资源上传之前
    const beforeUpload = file => {
      const fileType = file.name.split(".")[1];
      console.log("fileType: 上传之前：", fileType);
    };
...
// 上传文件改变时的状态
    const handleChange = info => {
      uploadLoading = true;

      if (info.file.status !== "uploading") {
        // 正在上传
      }
      if (info.file.status === "done") {
        // 修改file-list
        let resFileList = [...info.fileList];
        resFileList = resFileList.map(file => {
          if (file.response && !!file.response.success) {
            const { fileName, fileUrl } = file.response.data;
            file.name = fileName;
            file.type = fileName.split(".")[1];
            file.path = fileUrl;
            delete file.response;
          }
          return file;
        });
        fileList = resFileList;
        message.success("上传成功");
        uploadLoading = false;
        updateData.fileType = ""; // 上传结束 清除文件类型
      } else if (info.file.status === "error") {
        message.error("上传失败");
        uploadLoading = false;
        updateData.fileType = ""; // 上传结束 清除文件类型
      }
    };