el-upload上传文件类型大小限制+手动上传+通过后端给的接口带参数_el-upload 文件类型

最新推荐文章于 2024-07-17 15:26:15 发布

2401_85124682

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量417

点赞数 3

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/2401_85124682/article/details/139623740

版权

type=“success”
:loading=“submitebtn”
:disabled=“this.fileList.length == 0”
@click=“submitUpload”
>上传配置

只能上传xml/a2l文件

data(){
  return{
    url: "",//action 设置为空字符串即可
    fileList: [],//展示在页面上的文件 操作可以对 文件进行 相应的展示和删除
  }
}

methods：{
    // 选择的文件超出限制的文件总数量时触发
    limitCheck() {
      this.$message.warning("最多只能上传2个文件");
    },
    // 上传到服务器
    submitUpload() {
      this.submitebtn = true;
      let formData = new FormData();
      console.log(this.fileList);
      let newname = this.fileList[0].raw.name;
      let filea2L = {};
      let fileXML = {};
      if (newname.substring(newname.lastIndexOf(".")) === ".a2l") {
        filea2L = this.fileList[0].raw;
        fileXML = this.fileList[1] ? this.fileList[1].raw : {};
      } else {
        filea2L = this.fileList[1] ? this.fileList[1].raw : {};
        fileXML = this.fileList[0].raw;
      }
      console.log(fileXML);
      formData.append("a2lFile", filea2L);
      formData.append("soaXml", fileXML);
      formData.append("projectId", this.projectId);
      this.postRequest("/file/upload", formData).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.$message({
            dangerouslyUseHTMLString: true,
            message:`<h4>文件上传成功</h4><h4>${filea2L.name?filea2L.name:''}</h4> 
                     <h4>${fileXML.name?fileXML.name:''}</h4>`,
            type:'success',
            duration:3500
          });
          this.submitebtn = false;
        } else {
          this.$message.error(res.message);
          this.submitebtn = false;
        }
      });
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList;
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {
      console.log(file);
    },
    // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 
    reject，则停止删除。
    beforeRemove(file, fileList) {
      console.log(file);
      console.log(fileList);
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 选取文件改变时的操作 可以判断文件类型是否 把不符合的删除缓存 fileList 就是页面缓存的文件
    changefile(file, fileList) {
      console.log(file);
      console.log(fileList);
      let arr = [];
      fileList.forEach((item, index) => {
        let endname = item.raw.name.substring(item.raw.name.lastIndexOf("."));
        arr.push(endname);
        if (endname != ".a2l" && endname != ".xml") {
          this.$message.error("上传文件格式只能是 xml 、a2l 格式!");
          fileList.splice(index, 1);
        }
      });
      console.log(arr);
      if (new Set(arr).size != fileList.length) {
        fileList.splice(-1);
        this.$message.warning("选取失败 ! 相同格式的最多上传一次");
      }
      console.log(fileList);
      this.fileList = fileList;
    },
}