ElementUI中Upload上传的基本用法

最新推荐文章于 2025-04-02 20:40:08 发布

风里有诗句

最新推荐文章于 2025-04-02 20:40:08 发布

阅读量4.1k

点赞数

分类专栏： vue 文章标签： elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_43378800/article/details/121334342

版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了如何利用Element-UI组件库中的`el-upload`组件实现文件上传功能，包括设置上传参数、处理上传成功与失败的回调、限制上传文件类型以及展示上传错误信息的方法。代码示例中展示了上传前的校验、上传后的反馈以及错误信息的显示，确保上传过程符合指定要求。

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

1、我在之前的文章中有写过关于Upload上传中遇到的一些问题，本篇只讲述基本用法
在这里插入图片描述

2、代码

<el-dialog title="文件上传" :visible.sync="excelVisible" width="40%" center>
<el-upload
        style="text-align: center"
        :show-file-list="false"
        :on-error="handleError"
        :on-success="handleSuccess"
        :before-upload="handleBeforeUpload"
        :http-request="uploadSectionFile"
        class="upload-demo"
        drag
        action=""
        multiple
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">仅限xls和xlsx文件</div>
      </el-upload>

   <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="success"">下载模板</el-button>
        <el-button
          style="margin-right: 20px;"
          size="mini"
          >取 消</el-button
        >
      </span>

//如需展示错误信息
    <template>
        <el-table
          v-show="errorLabel.length > 0"
          :data="errorLabel"
          size="mini"
          border
          style="width: 100%"
        >
          <el-table-column align="center" width="50" type="index" label="序号">
          </el-table-column>
          <el-table-column
            align="center"
            width="80"
            prop="order"
            label="错误行"
          >
          </el-table-column>
          <el-table-column label="错误描述">
            <template slot-scope="scope">
              <span style="color: red">{{ scope.row.desc }}</span>
            </template>
          </el-table-column>
        </el-table>
      </template>

3、上传的一些方法

methods:{
	//失败时的方法
    handleError(err) {
      this.$message.info(err.data);
    },
    
    //成功时的方法
    handleSuccess(response) {
      if (response.isSuccess) {
        this.$message.success(response.error);
        return;
      }
      this.$message.info(response.error);
    },

    // 上传前
    handleBeforeUpload(file) {
      // 校验
      let legalName = ["xlsx", "xls"];
      // 拿到后缀名
      let name = file.name.substring(
        file.name.lastIndexOf(".") + 1,
        file.name.length
      );
      if (legalName.includes(name)) {
        // console.log(legalName.includes(name));
      } else {
        this.$message.info("文件格式不对，仅限xls和xlsx");
        return false;
      }
    },

 //上传
    uploadSectionFile(params) {
      let form = new FormData();
      form.append("file", params.file);
      form.append("toWarehouseId", towarehouseid);
      this.axios
        .post(`接口`, form)
        .then((res) => {
          if (res.data.code == 200) {
            this.errorLabel = [];
          if (res.data.code == -1) {
            this.errorLabel = res.data.data;
            this.$message.info(res.data.message);
          }
        })
        .catch((res) => {
          console.log(res);
        });
    },
}

4、data里的定义

data(){
return{
		excelVisible: false,
		errorLabel: [],
  }
}