• 只能限制某种文件上传,如果新选择其他文件便提示文件错误,清空文件列表
:accept="'.pdf'"  --->   选择上传文件的时候自动匹配pdf的文件类型
:file-list="[row]" ref="uploadFile"   --->   获取到文件
                <el-upload class="file-upload" :action="actionUrl" :accept="'.pdf'"
                  :on-success="(res, file) => handleSuccess(res, file, row)" :http-request="handleUpload"
                  :show-file-list="false" :file-list="[row]" ref="uploadFile">
                  <el-button type="primary" plain>附件上传</el-button>
                </el-upload>
  • 实现方法:
    handleSuccess(res, file, row) {
      const data = res.data;
      this.$set(row, "type", 1);
      this.$set(row, "fileName", data.name + '.' + data.suffix);
      row.sourceId = data.id
      //这里设置 只能上上传 pdf 的文件
      let fileName = file.name;
      let pos = fileName.lastIndexOf(".");
      let lastName = fileName.substring(pos, fileName.length);
      console.log(lastName,lastName.toLowerCase());
      if (lastName.toLowerCase() !== ".pdf") {
        this.$message.error("文件必须为.pdf类型");
        // 这里跟下面的赋值数组为空是一样的,也是把数组里面的值删除
        // for (let i = 0; i < this.standardChange.length; i++) {
        //   if (this.standardChange[i].sourceId === row.sourceId && lastName.toLowerCase() !== ".pdf") {
        //     this.standardChange.splice(i , 1);
        //   }
        // }
        // 这里直接赋值为空,有个问题就是如果有文件的话就会全部都删除
        this.standardChange = [];
        //  这里选择其他文件的时候并没有清空列表
        // this.$refs.uploadFile.clearFiles();
        return false;
      }
    },
  • 最后选择文件的时候:

  •  选择其他文件的时候:

  • 列表清空已解决,通过拿到存放文件的列表直接赋值为空
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐