element一次上传单个文件，并将文件名呈现出来

    
    

        
              {{item.name}}
        
    
            
    
        上传文件
        
支持文件格式：.rar .zip .wps .doc .docx .pdf .xls .xlsx .jpg
    


      ruleForm: {
        attachmentVos: [],
      },
      fd: new FormData(),//上载的文件
      uploadId: Math.random().toString(36).substr(2).toLocaleUpperCase(),//确保ref是唯一的值
      fileList: [],
      uploadFiles: [], //待上载的文件列表
      fileTotal: 0, //上载的文件总数
      pindex: 0,//上载的文件及时回显
      currentUploadNum: 0,//用于确定是否上载所有选定的文件。

 // 附件资料--------开始
    handleSuccess(response, file, fileList) {
      console.log("成功了", response, file, fileList);
    },
    submitUpload() {
      this.$refs.upload.submit();
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log("file", file);
    },
    changeUpload(file, fileList) {
      console.log("fdsbsgfbsdf", file, fileList, fileList[fileList.length - 1]);
      //获取添加文件的状态
      file.status == "ready" && this.uploadFiles.push(file.raw);
      //获取原始文件的数量
      this.fileTotal = document.getElementsByName(this.uploadId)[0].files.length;
      //如果原始文件和upload当数字相同时，表示已添加上传方法并可以触发。

     if (this.uploadFiles.length === this.fileTotal) {
        for (let i = 0; i < fileList.length; i++) {
          console.log(fileList[i].type,fileList[i].raw.type);
          console.log(fileList[i],fileList[i]);

          let nameList = fileList[i].name.split(.)
          let getSuffix = nameList[nameList.length - 1]
          console.log(fileList[i]姓名后缀：, getSuffix);
          const isXls = getSuffix === "wps" || getSuffix === doc || getSuffix === docx || getSuffix === pdf || getSuffix === xls || getSuffix === xlsx || getSuffix === jpg

            if (!isXls) {
                this.uploadFiles = [];
                this.fileList = [];
                return this.$message.error(文件后缀必须为.wps/.doc/.docx/.pdf/.xls/.xlsx/.jpg！)
            }
          const isLt10M = fileList[i].size / 1024 / 1024;
          if (isLt10M > 50) {
            this.uploadFiles = [];
            this.fileList = [];
            return this.$message.error("文件大小不能超过 50MB!");
          }
        }
      }
      if (this.uploadFiles.length === this.fileTotal) {
        //获取上载文件的组件。
        const Uploader = this.$refs[Uploader-${this.uploadId}];
        //触发上载文件列表的方法。
        Uploader.submit();
        this.currentUploadNum = 0;
        console.log("this.currentUploadNum", this.currentUploadNum);
      }
    },
    annexUploads(file) {
      console.log("filefilefilefilefile", file);
      // let fd = new FormData();
      this.fd.append("Filedata", file.file);
      console.log("fdfdfdfdfdfdfd", this.fd);
      this.currentUploadNum++;
      //  console.log(this.uploadFiles.length,this.fileTotal,this.currentUploadNum , this.fileTotal);
      if (this.currentUploadNum === this.fileTotal) {
        this.loading = true;
        this.fd.append("type", "1");//添加附加传输参数
        annexUploads(this.fd)
          .then((res) => {
            if (res.code == "200") {
              this.loading = false;
              this.$message.success("附件上传成功！");
              res.data.forEach((item, index) => {this.ruleForm.attachmentVos.push(item);});
              console.log("this.ruleForm.attachmentVos",this.ruleForm.attachmentVos);
              this.uploadFiles = [];
              this.fileList = [];
              this.fd = new FormData();
            } else {
              this.$message.error(res.message);
            }
          })
          .catch((err) => {
            this.uploadFiles = [];
            this.fd = new FormData();
            this.loading = false;
          });
      }
    },
    // 项目内容--项目资料---删除
    handleClose(tag) {
      this.$confirm("确定要删除此文件吗?", "删除", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.ruleForm.attachmentVos.splice(this.ruleForm.attachmentVos.indexOf(tag),1);
          this.pindex++;
          this.$message({type: "success",message: "删除成功",});
        })
        .catch(() => {
          this.$message({type: "info",message: "删除已取消",});
        });
    },
    // 附件资料--------结束

:ref="Uploader-+uploadId"

if (this.uploadFiles.length === this.fileTotal) {
        //获取上载文件的组件。
       var name = "Uploader-" + this.uploadId
       var Uploader = this.$refs[name];
         //触发上载文件列表的方法。
       Uploader.submit();
       this.currentUploadNum = 0;
}