element upload 多文件手动一次性上传 文件重复性校验

el upload 组件

<el-upload
        class="upload-demo"
        ref="upload"
        accept=".gif,.PDF"
        :action="batchImportDwgUrl"
        :on-change="onChange"
        :on-remove="onRemove"
        :file-list="fileList"
        :auto-upload="false"
        multiple>
        <el-button slot="trigger" size="small" type="primary" >选择图纸</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确定所选图纸</el-button>
      </el-upload>

accept=".gif,.PDF" 指定属性文件选择时候的类型
:auto-upload=“false” false指定手动上传

accept 指定的效果

上传效果：

vue return 里边的关键变量定义

fileList: [],
msgPromise: Promise.resolve(),
batchImportDwgUrl: '',

文件上传的方法：

// 文件手动上传
    submitUpload() {
      // 当前没有选择任何文件，不调用方法
      if(this.fileList.length === 0){
        return false
      }

      // this.$refs.upload.submit();
      let uploadForm = new FormData()
      uploadForm.append("orderNo", this.newOrderForm.orderNo);
      uploadForm.append("customer", this.newOrderForm.customer);
      uploadForm.append("urgentLevel", this.newOrderForm.urgentLevel);
      uploadForm.append("orderDate", formatDate(this.newOrderForm.orderDate, "yyyy-MM-dd"));
      uploadForm.append("orderDeliverDate", formatDate(this.newOrderForm.orderDeliverDate, "yyyy-MM-dd"));
      for(let i=0;i<this.fileList.length;i++){
        uploadForm.append("file",this.fileList[i].raw);
      }

      this.$axios.post(importDrawingUrl, uploadForm, {
        headers: {
          'keyId': token,
          'Content-Type': 'multipart/form-data;charset=UTF-8',
          "Accept": "*/*"
        }
      }).then(response => {
        if (response.data.code !== '0000') {
          Notification.warning({
            title: '导入图纸失败！',
            message: response.data.msg,
            duration: 5000
          })
          return false;
        }
        // 把当前上传成功的图纸添加到列表
        for (const data of response.data.data) {
          this.newOrderTableData.push(data)
        }
        // 把当前已经确认导入成功的图纸保存起来
        for (const file of this.fileList) {
          this.confirmCurrentSelectFileList.push(file)
        }
        // 关闭窗体，清空所选文件列表
        this.fileList = []
        this.clearFiles()
        this.importDialogVisible = false
        console.log("当前确定成功的文件列表：")
        console.log(this.confirmCurrentSelectFileList)
      })

    },
        onChange(file,fileList){
      //这表示是添加行为
      // console.log(`准备修改文件${file.raw.name}, 此时文件列表长度为${fileList.length}`);
      if (file.status==='ready') {
        console.log(`添加了文件${file.raw.name}`);
        let myFile = file.raw;

        const type = myFile.type.toLowerCase();
        const isPDF = type === 'application/pdf';
        if (!(isPDF)) {
          // 关键作用，如果文件有问题直接不追究
          fileList.pop();
          this.handleMsg('上传的文件格式不正确', 'error');
          // 无论是不是增加新文件都更新长度信息
          return;
        }

        // 存在文件标识
        let existsFileFlag = false;

        for(let i=0; i < this.fileList.length; i++){
          if( (file.name === this.fileList[i].name) && (file.size === this.fileList[i].size) ) {
            // 如果存在了，赋值true
            existsFileFlag = true;
          }
        }

        // 遍历的这个文件存在当前列表直接结束
        if(existsFileFlag){
          // 否则不加入
          fileList.pop();
          // console.log(`文件已经存在：${file.name}`)
          // this.handleMsg(`文件已经选择过了：${file.name})`);
          Notification.warning({
            title: '文件重复提示：',
            message: `文件已经选择过了：${file.name})`,
            duration: 5000
          })
          return;
        }


        // 判断当前选择的图纸，和当次已经 确定所选图纸 是否重复
        let existsAllFileFlag = false;
        for(let i=0; i < this.confirmCurrentSelectFileList.length; i++){
          if( (file.name === this.confirmCurrentSelectFileList[i].name) && (file.size === this.confirmCurrentSelectFileList[i].size) ) {
            // 如果存在了，赋值true
            existsAllFileFlag = true;
          }
        }
        if(!existsAllFileFlag){
          this.fileList.push(file);
        } else {
          // 否则不加入
          fileList.pop();
          Notification.warning({
            title: '文件重复提示：',
            message: `当前选择的文件已经上传过了，请查看新建订单列表去确认：${file.name}`,
            duration: 5000
          })
          // this.handleMsg(`当前选择的文件已经上传过了，请查看新建订单列表去确认：${file.name}`);
          return;
        }

        console.log('最终添加的列表：')
        console.log(this.fileList)

      }

    },
    handleMsg(message, type = 'info') {
      const duration = 1500;
      //一定要this.msgPromise = XXX才有用，这样后调用的才会.then接到后面
      //Promise.then().then()和Promise.then(); Promise.then();是不一样的，前者是真串行
      this.msgPromise = this.msgPromise.then(() => {
        this.$message({message, type, duration});
      });
    },


    onRemove(file,fileList){
      this.fileList = fileList;
    },

java 后端Controler接口：

    /**
     * 批量图纸导入， 仅支持PDF文件
     */
    @ApiOperation(value = "导入：图纸导入")
    @ApiImplicitParams({
            @ApiImplicitParam(name = "orderNo", value="订单号", required=true, paramType="query"),
            @ApiImplicitParam(name = "customer", value="客户", required=true, paramType="query"),
            @ApiImplicitParam(name = "urgentLevel", value="紧急程度", required=true, paramType="query"),
            @ApiImplicitParam(name = "orderDate", value="订单日期 ", required=true, paramType="query"),
            @ApiImplicitParam(name = "orderDeliverDate", value="订单交期", required=true, paramType="query")
    })
    @PostMapping(value = "/importDrawing", produces = {MediaType.APPLICATION_JSON_UTF8_VALUE},consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public ResultUtils importDrawing(@RequestParam(value = "file") MultipartFile[] files,
                                     @RequestParam(value = "orderNo") String orderNo,
                                     @RequestParam(value = "customer") String customer,
                                     @RequestParam(value = "urgentLevel") String urgentLevel,
                                     @RequestParam(value = "orderDate") String orderDate,
                                     @RequestParam(value = "orderDeliverDate") String orderDeliverDate){

        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
        SalesAccountRequestVO salesAccountRequestVO = new SalesAccountRequestVO();
        salesAccountRequestVO.setOrderNo(orderNo);
        // 这里使用订单号来做identification的文件标识
        salesAccountRequestVO.setIdentification(orderNo);
        salesAccountRequestVO.setCustomer(customer);
        salesAccountRequestVO.setUrgentLevel(urgentLevel);
        salesAccountRequestVO.setOrderDate(DateUtils.stringToDate(orderDate, format));
        salesAccountRequestVO.setOrderDeliverDate(DateUtils.stringToDate(orderDeliverDate, format));

        ResultUtils resultUtils = salesAccountService.importDrawing(files, salesAccountRequestVO);
        return resultUtils;
    }

主要关注的关键代码：

可以私信我交流学习！！！