vue项目使用element组件上传excel文件

矫情吗；* 2022-09-04 11:58 192阅读 0赞

## html部分 ##

<button @click="impoortExcel">导入excel文件</button>
        
        
        <el-dialog title="导入人员档案" :visible.sync="importDialogVisible" width="66%">
          <el-upload
            ref="upload"
            name="file"
            :limit="limit"
            :auto-upload="false"
            action="接口地址"
            :on-exceed="handleExceed"
            :file-list="filelist"
            :on-change="handleChansge"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="postfile"
              :disabled="btn.disable"
            >{
       {btn.message}}</el-button>
            <div slot="tip" class="el-upload__tip">上传文件只能为excel文件，且为xlsx,xls格式</div>
          </el-upload>
            //此处可以写导入时出现的详细错误信息，包含第几行出现问题显示出来
          <div v-for="o in errmesg" :key="o.message" class="text item">{
       { o.message }}</div>
        </el-dialog>

## data部分 ##

data() {
      return {  
       importDialogVisible: false,
          //文件
          file: "",
          filename: "",
          limit: 1,
          filelist: [],
          errmesg: [],
          btn: {
            disable: false,
            message: "上传服务器",
          },
       }
    }

## 弹窗方法 ##

impoortExcel() {
          let that = this;
          that.importDialogVisible = true;
        },

## 选择文件方法 ##

handleExceed(e) {
          // 判断是否只能上传一个文件，超过提示报错
          console.log(e);
          this.$notify.error({
            title: "错误",
            message: "只能上传一个文件哦",
          });
        },
        handleChansge(file, fileList) {
          console.log(file);
          let name = file.name;
          if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
            this.$notify.error({
              title: "错误",
              message: "上传文件只能为excel文件，且为xlsx,xls格式",
            });
            this.filelist = [];
            this.file = "";
            return false;
          }
          this.file = file.raw;
          this.filename = file.name;
        },

## 上传文件方法 ##

postfile() {
          let that = this;
          if (this.file == "") {
            that.$notify.error({
              title: "错误",
              message: "上传文件不能为空",
            });
            return false;
          } else {
            // 文件形式的需要用 formData形式
            let formData = new FormData();
            formData.append("file", this.file);
            let url = "接口地址";
            let config = {
              headers: { "Content-Type": "multipart/form-data" },
            };
            this.btn.disable = true;
            this.btn.message = "上传中，请等待";
            this.$axios1
              .post(url, formData, config)
              .then(function (response) {
                console.log(response);
                that.$notify({
                  title: "成功",
                  message: response.data.message,
                  type: "success",
                });
                that.filelist = [];
                that.btn.disable = false;
                that.btn.message = "上传服务器";
              })
              .catch((err) => {
                that.btn.disable = false;
                that.btn.message = "上传服务器";
                that.$notify.error({
                  title: "错误",
                  message: "上传过程出错啦",
                });
              });
          }
        },

## 效果展示 ##

### 页面展示 ###

![45947edb45a9e65f31ec1d9a9f61c15e.png][]

![c649b4642a1bb28d32bc55bb63c43137.png][]

上传成功之后 根据后台返回数据自行处理

[45947edb45a9e65f31ec1d9a9f61c15e.png]: /images/20220829/2c278c6f9b8d44b48cfdfb6d34add69f.png
[c649b4642a1bb28d32bc55bb63c43137.png]: /images/20220829/0f51511e50024d5e9042cfcfede483fb.png