el-upload上传文件

el-upload上传文件

           <el-upload
                accept=".xlsx, .xls"
                ref="defaultUpload"
                action="/"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="beforeUpload"
                list-type="text"
                file
              >
                <el-button size="small" type="primary" icon="el-icon-upload"
                  >上传</el-button
                >
              </el-upload>
    beforeUpload(file, fileList) {
      let formData = new FormData();
      formData.append("file", fileList[0].raw);
      this.$confirm("导入注册系统,会删除当前所有数据,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          importSys(formData).then((res) => {
            if (res && res.code == "200") {
              this.gettableList();
              this.$message({
                type: "success",
                message: "导入注册系统成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消导入注册系统",
          });
        });
    },
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 `el-upload` 组件来实现文件功能。`el-upload` 是一个基于 Element-UI 的组件,可以方便地实现文件文件预览的功能。 首先,确保你已经安装了 Element-UI。然后,在你的项目中引入 `el-upload` 组件,并按照以下步骤配置: 1. 在需要使用上组件的页面中,添加 `el-upload` 标签。例如: ```html <template> <div> <el-upload class="upload-demo" action="/your-upload-url" :on-success="handleSuccess" :before-upload="beforeUpload" :limit="3" :on-exceed="handleExceed" :auto-upload="false" > <el-button size="small" type="primary">点击上</el-button> <div slot="tip" class="el-upload__tip">只能上jpg/png文件,且不超过500kb</div> </el-upload> </div> </template> ``` 2. 在 `el-upload` 的属性中配置上相关的参数,例如: - `action`:设置上文件的接口地址。 - `on-success`:设置上成功后的回调函数。 - `before-upload`:设置上前的钩子函数,用于对文件进行校验或其他操作。 - `limit`:设置最大允许上文件数量。 - `on-exceed`:设置超出限制时的回调函数。 - `auto-upload`:设置是否自动上文件。 3. 在组件的 `methods` 中定义相关函数,例如: ```javascript methods: { handleSuccess(response, file, fileList) { // 上成功后的处理逻辑 console.log(response, file, fileList); }, beforeUpload(file) { // 文件前的校验逻辑 const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt2M = file.size / 1024 / 1024 < 2; if (!isJPG) { this.$message.error('只能上 JPG/PNG 格式的图片'); } if (!isLt2M) { this.$message.error('上图片大小不能超过 2MB'); } return isJPG && isLt2M; }, handleExceed(files, fileList) { // 超出文件数量限制时的处理逻辑 this.$message.warning(`当前限制选择 ${this.limit} 个文件,本次选择了 ${files.length} 个文件,共选择了 ${fileList.length + files.length} 个文件`); } } ``` 以上是一个简单的 `el-upload` 组件的配置示例。你可以根据自己的需求进行修改和扩展。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值