上传excel文件

文件上传,其实就是用el-upload组件来实现上传,只是换了样式,和图片上传一样

javascript 复制代码
<el-form-item label="选择文件">
          <el-input placeholder="请选择文件" v-model="form.file" disabled style="width: 450px">
            <el-upload slot="append" :show-file-list="false" :headers="headers" accept=".xlsx" action="/api/follow-admin/data-import-info/import" :before-upload="handleUploadBefore" :on-success="handleUploadSuccess">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-input>

          <p style="font-size: 12px; color: #e6a23c">文件大小不可大于10M且必须按照模版格式进行上传,仅支持xls/xlsx格式文件</p>
        </el-form-item>


 // 上传前事件
    handleUploadBefore (file) {
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isLt2M) {
        this.$message.warning('文件大小不能超过 1M')
      }
      return isLt2M
    },
    // 上传成功处理
    handleUploadSuccess (res) {
      if (res.code === 200) {
        this.$message.success('导入成功')
        this.form.file = res.data
        this.getTableDataList()
      } else {
        this.$message.error(res.msg)
      }
    }


<style lang="less" scoped>
.resident-export-data-manage {
  .table-bg {
    padding: 20px !important;
    min-height: auto !important;
    ::v-deep .el-form {
      .el-form-item {
        &:nth-child(2) {
          .el-form-item__content {
            .el-input {
              .el-input-group__append {
                background-color: #136fe0 !important;
                span {
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
相关推荐
前端工作日常3 小时前
我学习到的Vue2.6的prop修饰符
vue.js
小菜全3 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json
赵得C3 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG3 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904273 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js
ST.J3 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
还有多远.5 小时前
jsBridge接入流程
前端·javascript·vue.js·react.js
半花7 小时前
【Vue】defineProps、defineEmits 和 defineExpose
前端·vue.js
我的名字帅不帅7 小时前
使用 Element UI -Container 布局容器时监听屏幕滚动无效
vue.js
用户28003832908407 小时前
升级Vue3.4+版本,ant-design-vue 3.x 版本的Modal函数方式无法关闭问题
vue.js