反思总结 -- 记录element-plus 文件上传传参问题

最新推荐文章于 2024-07-06 16:47:02 发布

PPontiff

最新推荐文章于 2024-07-06 16:47:02 发布

阅读量219

点赞数 3

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/m0_61480542/article/details/135947266

版权

本文介绍了如何在Vue应用中使用ElementUI的`el-upload`组件创建一个上传Excel文件的对话框，包括文件类型限制、异步上传处理以及与后端API的集成，展示了如何处理文件上传进度、成功回调和模板下载功能。

摘要由CSDN通过智能技术生成

<el-dialog :title="upload.title" v-model="uploadOpen" width="400px" custom-class="vDialog">
      <el-upload ref="uploadRef" v-if="uploadOpen" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="uploadUrl"
        :disabled="isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess"
        :auto-upload="false" drag :data="uploadParams">
        <el-icon class="el-icon--upload">
          <upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;"
              @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" v-if="!isUploading" @click="submitFileForm">确 定</el-button>
          <el-button type="primary" v-if="isUploading">
            <el-icon class="is-loading">
              <Loading />
            </el-icon>
          </el-button>
          <el-button @click="uploadOpen = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>

html部分 - 全代码

// 导入
const upload = {
  title: "导入excel",
  headers: { Authorization: "Bearer " + getToken() },
  url: import.meta.env.VITE_APP_BASE_API + "你自己的导入接口"
};
const [uploadOpen, isUploading, uploadUrl, uploadParams, uploadOpenPro, uploadOpenProObj] = toRefs(reactive([
  false, false, "", {year:''}, false, {}
]))
//- 导入
const [getExport, handleFileUploadProgress, handleFileSuccess, submitFileForm, importTemplate, personnelDownload] = [
  //- 按钮：导入 handleImport
  function () {
    uploadParams.value.year = queryParams.value.year
    uploadUrl.value = upload.url;
    uploadOpen.value = true
  },
  //- 文件上传中 handleFileUploadProgress
  function (event, file, fileList) {
    isUploading.value = true;
  },
  //- 文件上传成功 handleFileSuccess
  function (res, file, fileList) {
    uploadOpen.value = false;
    isUploading.value = false;
    proxy.$refs["uploadRef"].handleRemove(file);

    uploadOpenPro.value = true
    uploadOpenProObj.value = res.data


    if (res.code != 200) {
      proxy.$modal.msgError(res.msg);
      return;
    }
    proxy.$modal.msgSuccess("导入成功");
  },
  //- 提交上传文件 submitFileForm
  function () {
    proxy.$refs["uploadRef"].submit();
  },
  //- 下载模板操作 importTemplate
  function () {
    proxy.download("你自己的接口", { id: uploadParams.value.id }, `模板_${new Date().getTime()}.xlsx`);
  },
  // 下载错误模版
  function () {
    proxy.download("你自己的接口", { id: uploadParams.value.id }, `模板_${new Date().getTime()}.xlsx`);
  }
]

传参部分主要通过:data="uploadParams" , uploadParams = {参数:""}来实现传参