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>