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 = [];
}
},