Element Upload 上传文件

文件完整的代码块

<template>
  <div>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="https://jsonplaceholder.typicode.com/posts/"
      :on-change="handleChange"
      :file-list="fileList"
      :multiple="false"
      :http-request="modeUpload"
      :before-remove="beforeRemove"
      :before-upload="beforeUpload"
      :on-exceed="handleExceed">
        <el-button type="primary">上传比对文件</el-button>
      </el-upload>
  </div>
</template>

<script>
export default {
  data(){
    return{
      fileList: [],
    }
  },
methods:{
  // 上传文件让第二次覆盖第一的文件
  handleChange(file,fileList){
    <!-- 判断是否上传过文件，如果上传过文件执行该条语句，否则不执行 -->
    if (fileList.length>0) {
      this.fileList=[fileList[fileList.length-1]];
    }
  },
  // 上传文件请求对应的接口生成需要的值
  modeUpload(){
  },
  // 点击上传文件右边的删除，删除页面对应显示的文件
  beforeRemove(){
    this.fileList = [];
  },
  //  上传文件时触发
  beforeUpload(file){
    var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
    const extension = testmsg === "png";
    const extension2 = testmsg === "jpg";
    const isLt32M = file.size / 1024 / 1024 < 32;
    if (!extension && !extension2) {
      this.DonMessage.warning('上传文件只能是png和jpg格式！');
    }
    if (!isLt32M) {
      this.DonMessage.warning('上传文件大小不能超过32MB！');
    }
    return (extension || extension2) && isLt32M;
  },
   // 上传的提示
  handleExceed(files, fileList){
    this.$message.warning('当前只允许上传一个文件');
  },
},
</script>

beforeRemove使用的情况

清除上传文件的方法

this.$refs.upload.clearFiles();