element 文件流 上传

 

<template>
  <!-- 
      action        必选参数，上传的地址
      accept        接受上传的文件类型
      multiple        是否支持多选文件
      limit            最大允许上传个数
      http-request    覆盖默认的上传行为，可以自定义上传的实现
      file-list        上传的文件列表
   -->
  <el-upload
    class="upload-demo"
    :action="this.uploadUrl"
    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
    multiple
    :limit="1"
    :http-request="uploadFile"
    :file-list="fileList"
  >
    <samp class="component-export-cell">导入</samp>
  </el-upload>
</template>

<script>
import axios from "axios";

export default {
  props: ["state"],
  data() {
    return {
      uploadUrl: this.state.uploadtApi, // url 上传接口
      fileList: [], // 上传文件的数据列表
    };
  },
  methods: {
    // 覆盖 el-upload 组件默认的 上传
    uploadFile(item) {
      // 创建 FormData 对象
      let param = new FormData();

      // 通过 append() 方法来追加数据
      param.append("file", item.file);

      // 通过 get 方法对值进行读取
      console.log(param.get("file"));

      // 请求接口
      axios({
        method: "post",
        url: this.uploadUrl,
        headers: {
          "Content-Type": "multipart/form-data", // 请求头 类型
        },
        data: param,
      })
        .then((res) => {
          if (res.data && res.data.code === "0000") {
            console.log("导入成功");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.component-export-cell {
  width: 60px;
  height: 32px;
  display: block;
  line-height: 32px;
  font-size: 14px;
  color: #ffffff;
  text-align: center;
  font-weight: bold;
  background: linear-gradient(to right, #2644d7 0%, #0a0b93 100%);
  border-radius: 18px;
  margin: 10px 20px 0 0;

  &:hover {
    text-decoration: none;
  }
}
</style>