vue+el-upload实现文件上传（导入）+（导出）

 导入

1.

              <el-form-item class="demand-box">
                <el-dialog :visible.sync="demandVisible" width="30%">
                  <span>
                    <el-upload
                      action=""
                      :show-file-list="true"
                      :auto-upload="false"
                      :on-change="uploadChangeFun"
                      :file-list="fileList"
                      :on-remove="removeFileFun"
                      ref="upload"
                    >
                      <el-button class="search-btn" type="primary" :plain="true" size="mini">上传文件</el-button>
                    </el-upload>
                  </span>
                  <span slot="footer" class="dialog-footer">
                    <el-button class="reset-btn" @click="demandVisible=false">取 消</el-button>
                    <el-button class="search-btn" type="primary" @click="addProjectFun">确 定</el-button>
                  </span>
                </el-dialog>
                <el-button type="success" class="reset-btn" size="small" @click="demandVisible=true">导入需求</el-button>
              </el-form-item>

2.data中定义

  data() {
    return {
      demandVisible: false, //导入需求弹框
      fileList: [], //上传 
      imgSize: 2, //上传的图片大小限制(默认2M)
      uploadExcelVal: "", //上传成功之后的文件地址
    };
  },

3.methods

methods: {
     //设置创建参数
     paramSetFun() {
      let formData = new FormData();
      if (this.uploadExcelVal) {
        formData.append("requirementFile", this.uploadExcelVal);
      }
      formData.append(`compareRequirementVos`,JSON.stringify(this.compareRequirementVos))
      //this.compareRequirementVos是一个数组对象
      return formData
    },
    addProjectFun() {
        this.demandVisible = false;
        this.api({
          url: "~~~~~~~",
          method: "post",
          data: this.paramSetFun()
        }).then(res => {
          this.$message({
            message: "导入成功",
            type: "success"
          });
          this.uploadExcelVal = "";
          this.fileList = [];
        }).catch(error => {
          this.uploadExcelVal = "";
          this.fileList = [];
        });
    },
    // 导入
    uploadChangeFun(file, fileList) {
      let isLt2M = file.size / 1024 / 1024 <= this.imgSize;
      const isText = "application/vnd.ms-excel";
      const isTextComputer =
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      if (file.raw.type != isText && file.raw.type != isTextComputer) {
        this.$message.error(`上传文件的格式不正确!`);
        this.fileList = [];
        return false;
      }
      if (!isLt2M) {
        this.$message.error(`上传文件大小不能超过${this.imgSize}MB!`);
        this.fileList = [];
        return false;
      }
      this.uploadExcelVal = file.raw;
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]; //展示最后一次选择的csv文件
      }
    },
    removeFileFun() {
      this.uploadExcelVal = "";
    },
}

4.FormData 传递参数有数组类型时，传送的数据格式

//要传递的数据类型：
 
//【第一种】：
var arr=[
    {a:"1",b:"s",c:"6"},
    {a:"1",b:"s",c:"6"},
    {a:"1",b:"s",c:"6"}
];
//【第二种】：
var arrs = [
    ["v1","v2","v1"],
    ["v1","v2","v1"],
    ["v1","v2","v1"]
];
 
//正常直接 formData.append("name", val) 传递，后台接收：
 
第一种："arr" => "[object Object],[object Object],[object Object]"
第二种："arrs" => "v1,v2,v1,v1,v2,v1,v1,v2,v1"
 
//这些都不是我们想要的，那我们应该怎么处理呢？很简单用JSON.stringify转化一下即可：
 
formData.append("arr", JSON.stringify(arr));
formData.append("arrs", JSON.stringify(arrs));
 
//这样就能得到我们想要的数据了
 
第一种："arr" => "[{"a":"1","b":"s","c":"6"},{"a":"1","b":"s","c":"6"},{"a":"1","b":"s","c":"6"}]"
第二种："arrs" => "[["v1","v2","v1"],["v1","v2","v1"],["v1","v2","v1"]]"

二.导出

 // 导出
    exportDataExcel() {
      //导出团队数据
      this.api({
        url: "~ ~ ~",
        method: "post",
        responseType: "blob", //服务器返回的数据类型
        data: {
          iterId: this.treeList.iterId, //传给后端的参数
       }
      }).then(dat => {
        const content = dat;
        const blob = new Blob([content]);
        const fileName = "数据报表.xls";
        if ("download" in document.createElement("a")) {
          //支持a标签download的浏览器
          const link = document.createElement("a"); //创建a标签
          link.download = fileName; //a标签添加属性
          link.style.display = "none";
          link.href = URL.createObjectURL(blob);
          document.body.appendChild(link);
          link.click(); //执行下载
          URL.revokeObjectURL(link.href); //释放url
          document.body.removeChild(link); //释放标签
        } else {
          //其他浏览器 
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },