el-upload upload file type size limit + manual upload + interface with parameters given by the backend

First look at the renderings:

---

 

Project requirements:

The local upload file type can only be xml and a2l. The number of multi-uploads is 2. You can upload multiple files. Each format can upload up to one file. The upload is manually uploaded to the server. There are corresponding prompts for upload errors.

---

demand analysis:

  First of all, the upload is manual upload, then the file type I plan to process the file during the process of selecting the file to the front page, or I can make a judgment when uploading the server. I choose to make a judgment when selecting the file here. ① It is to show that it is correct. Files that do not meet my needs are displayed on the front-end page, and the user experience is not good. ②It is for processing before the server that you need to use  before-upload (the hook before uploading the file, the parameter is the uploaded file, if it returns false or returns Promise and is accepted reject, stop uploading) hook function and  before-upload must have  an action (required parameter, upload address) to be triggered and I upload manually, I need to pass parameters through the interface, so I don't want to use action to fill in the address, there will be many changes

  1. Upload to the server manually    : auto-upload="false" ;

  2. Multi-choice upload   : multiple="true"   is true by default

  3. File type   accept=".xml,.a2l"

  4. The number of long uploads is 2 and the prompt  : limit="2" :on-exceed="limitCheck" is a hook when the number of files exceeds the limit

  5. There are corresponding prompts for upload errors and each format can upload at most one file   : on-change="changefile"  The hook when the file status changes, it will be called when adding files, uploading successfully and uploading failed

---

Code display:

            <el-upload
              ref="upload"
              :action="url"
              :before-remove="beforeRemove"
              :on-change="changefile"
              accept=".xml,.a2l"
              :limit="2"
              :on-exceed="limitCheck"
              :auto-upload="false"
              :multiple="true"
              :file-list="fileList">
              <el-button
                slot="trigger"
                size="mini"
                type="primary"
                style="letter-spacing: 1px"
                >选取xml/a2l文件</el-button>
              <el-button
                style="margin-left: 10px"
                size="mini"
                type="success"
                :loading="submitebtn"
                :disabled="this.fileList.length == 0"
                @click="submitUpload"
                >上传配置</el-button>
              <h4 slot="tip" class="el-upload__tip">
                只能上传xml/a2l文件
              </h4>
            </el-upload>

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;
    },
}