Vuetify—— 上传按钮布局

最新推荐文章于 2023-10-22 22:49:16 发布

原创最新推荐文章于 2023-10-22 22:49:16 发布 · 731 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这篇博客展示了如何在Vue应用中实现Excel文件的上传和导入功能。通过监听文件输入组件的变更事件，将文件数据附加到FormData对象中，并使用axios发送POST请求到服务器进行数据导入。当导入成功时，会刷新列表并显示提示信息；如果导入失败，则展示错误信息。

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

在这里插入图片描述

<v-btn
  class="ml-3"
  depressed
  color="primary"
  style="position:relative;"
>
  <v-file-input
    @change="uploadFile"
    accept=".xls, .xlsx"
    style="position:absolute;z-index:999;width: 200px;height:66px;flex: none; background: none;opacity:0"
  ></v-file-input>
  <v-icon class="pr-1">mdi-database-import-outline</v-icon>
  {{ $t("application.Import SubApplication") }}
</v-btn>


uploadFile(value) {
  let formData = new FormData();
  formData.append("file", value);
  this.loading = true;
  this.$http
    .post(
      `api/${this.$route.params.id}/account/import`,
      formData
    )
    .delegateTo(api_request)
    .then(() => {
      this.refreshList();
      this.loading = false;
      return "导入账户成功";
    })
    .catch(({ code, message }) => {
      this.loading = false;
      throw `导入账户失败：${this.$t("api." + code)}, 额外信息: ${this.$t(
        "api." + typeof message === "string"
          ? message
          : JSON.stringify(message)
      )}`;
    })
    .delegateTo(this.$snackbar.delegateError);
},