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

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 = ""; // 上传结束 清除文件类型
      }
    };


猜你喜欢

转载自blog.csdn.net/Dark_programmer/article/details/131204865
今日推荐