vue3 Element Plus 上传组件 before-upload 钩子函数不触发

292 阅读1分钟

需求

手动上传,限制文件不能超过100kb,文件数不能超过10个

代码

 // js
 let fileListData = ref([])
 
const generateCharts = () => {
  fileListData.value.length >1?router.push('/multi-comparison'):router.push('/single-comparison')
  // 应该是文件加类型的传递参数
}


const progress = (value,changeFileList) =>{
  // 限制
  const isLt10M = value.size / 1024 < 1000;
  if (!isLt10M) {
    ElMessage.error('上传文件大小不能超过 1000kb!');
    changeFileList.splice(-1,1)
    return false;
  }
  // 更改文件数量
  excelMetadataStore.update_file_num(fileListData.value.length+1)

}

const handleRemove = (files) =>{
  console.log(fileListData,'==fileListData==');
  excelMetadataStore.update_file_num(fileListData.value.length-1)
}

const exceed = () =>{
  ElMessage.error('上传文件数量不能超过10个!');
}
 
 
 
 <el-upload  multiple drag accept=".xlsx" ref="uploadRef" class="upload-demo" :auto-upload="false"  
          v-model:file-list="fileListData"   limit=limitFileNum :max-size="1024" :on-change="progress" :on-exceed="exceed" :before-remove="handleRemove">
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖到此处 <em>点击上传</em></div>
        <div class="el-upload__tip">只能上传xlsx文件,且 不超过1000kb</div>
</el-upload>