el-uploade导入excel表

最新推荐文章于 2024-03-15 14:41:32 发布

小钟要长高

最新推荐文章于 2024-03-15 14:41:32 发布

阅读量422

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/q515518/article/details/127899695

本文介绍如何使用Element UI中的el-upload组件实现Excel文件(.xlsx)的上传功能，并通过具体代码展示了文件选择后的处理流程，包括文件转为FormData并提交至后台进行进一步处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-uploade导入excel表

  <el-upload
    ref="upload"
    :limit="1"
    accept=".xlsx"
    :show-file-list="false"
    :auto-upload="false"
    :on-change="onChangeM"
    :http-request="httpRequestUpload"
    :disabled="state.rosteringValue?true:false"
  >
    <button title="导入"
    :style="state.rosteringValue&&state.userType == 1?'color:#6e6c6c':'color:#98dcff'"
    >导入排班表</button>
  </el-upload>

//获取上传文件
const httpRequestUpload = (item: any) => {};//并没有用到
const upload = ref<UploadInstance>();
// 上传事件
const onChangeM = (file: any) => {
    console.log("file",file)
    state.files = new FormData();
    state.files.append("file", file.raw);
    console.log("state.files",state.files)
    if (file.status == "ready") {
      upload.value.submit();
      http.watchList.importRoster(state.files).then((res: any) => {
        if (res.code == 0) {
        ElMessage.success("上传成功");
        } else {
        ElMessage.success("上传失败请重新上传");
        }
      });
    }
};