Vue el-upload上传文件时,限制上传文件个数为1

3,599 阅读1分钟

Vue使用el-upload来实现上传文件. 尝试了使用自带的参数:limit=1,但是交互效果不太好 目标:只允许上传一个文件,多次上传时,后上传的覆盖先上传的文件

//不使用limit
<el-form>
<el-form-item>
<el-upload
            v-show="radio1 == 2"
            action=""
            :on-change="handleFileChange"
            :before-remove="beforeFileRemove"
            :on-remove="handleFileRemove"
            :file-list="File"
            :auto-upload="false"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <span slot="tip" class="el-upload__tip"> 只能上传PNG文件 </span>
          </el-upload>
        </el-form-item>
        </el-form>

//JS代码

 handleFileChange(file, fileList) {
      //this.checkFile校验文件格式和大小
      if (this.checkFile(file)) {
      //如果fileList.length>1.则只保留最后一个,删除前面的
        if (fileList.length > 1) {
          fileList.splice(0, 1);
          this.File = [];
        }
        this.File.push(fileList[0].raw);
      } else {
        //校验不通过,清空绑定的文件
        this.File = [];
      }
    },