Vue el-upload组件上传(导入)excel文件

￡神魔★判官ぃ 2022-09-15 15:48 305阅读 0赞

[vue项目使用element组件上传excel文件 - 爱喝可乐的靓仔 - 博客园][vue_element_excel_ - _ -]

[vue项目中使用element-ui实现excel表格上传\_悦度空间-CSDN博客][vue_element-ui_excel_-CSDN]

<button @click="impoortExcel">导入excel文件</button>
    
        <el-dialog
          title="导入模板文件"
          :visible.sync="fileDialogVisible"
          width="50%"
          :close-on-click-modal="false"
          :before-close="handleDialogClose"
          center
        >
          <el-upload
            style="min-height: 40vh"
            ref="upload"
            name="file"
            :limit="1"
            :auto-upload="false"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            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"
              style="margin-top: 20px; font-size: 14px"
            >
              上传文件只能为excel文件，且为xlsx,xls格式
            </div>
          </el-upload>
          
          <div v-for="item in errmesg" :key="item.message" class="text item">
            {
       { item.message }}
          </div>
        </el-dialog>

data:

data() {
      return {  
       fileDialogVisible: false,
          //文件
          file: "",
          filename: "",
          filelist: [],
          errmesg: [],
          btn: {
            disable: false,
            message: "开始上传",
          },
       }
    }

弹窗：

//打开弹窗 
    impoortExcel() {
          let that = this;
          that.fileDialogVisible= true;
    },
    
    //关闭弹窗 移除数据
        handleDialogClose() {
          this.filelist = [];
          this.file = "";
          this.fileDialogVisible = false;
        },

## 选择文件，上传文件方法 ##

请求方法

import request from 'utils/fetch';
    
    export function toLead(params) {
        return request({
            url: '/api/pu/unite/import/data',
            method: 'post',
            data: params,
            headers: { "Content-Type": "multipart/form-data" }
        });
    }

import { toLead} from "@/api/lead/index"; //引入
    
    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);
            formData.append("code", this.menuCode);
            formData.append("cltIssue", this.Paymentdays ? this.Paymentdays : "");
            let config = {
              headers: { "Content-Type": "multipart/form-data" },
            };
            this.btn.disable = true;
            this.btn.message = "上传中，请等待";
            // this.$axios1.post(url, formData, config); //也可以这种 我这里是封装的
            toLead(formData)
              .then(function (response) {
                console.log(response);
                that.$notify({
                  title: "上传成功",
                  message: response.msg,
                  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: "上传过程出错啦",
                });
              });
          }
        },

[vue_element_excel_ - _ -]: https://www.cnblogs.com/loveliang/p/13578034.html
[vue_element-ui_excel_-CSDN]: https://blog.csdn.net/qq_36718999/article/details/95387542