2、【上传文件】vue+iview如何上传文件并携带请求头和参数实现批量导入数据？

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210125163753476.png

<template>
  <div class="app">
    <Upload
      ref="upload"
      action="/api/device/deviceInfo/createDeviceInfoByExcel"//接口地址
      :headers="{//请求头
        token: token,
        'Content-Type': 'multipart/form-data',
      }"
      name="excel-file"
      :show-upload-list="true"//是否显示已上传文件列表
      :before-upload="handleUpload"//上传文件之前的钩子
      :on-format-error="handleFormatError"//文件格式验证失败时的钩子
      :format="['xlsx', 'xls']"//规定上传文件格式
    >
      <Button type="info" icon="ios-cloud-upload-outline">导入</Button>
    </Upload>
  </div>
</template>
<script>
export default {
  data() {
    return {
      token: localStorage.getItem("token"),//请求头要求传的token值
    };
  },
  created() {
    console.log(this.token);
  },
  methods: {
    handleUpload(file) {
      console.log(file);//钩子函数返回字段
      let formData = new FormData();
      formData.append("file", file);
      console.log(formData);
      this.$axios({
        url: "/api/device/deviceInfo/createDeviceInfoByExcel",
        method: "post",
        headers: {
          "Content-Type": "multipart/form-data",
          token: localStorage.getItem("token"),
        },
        data: formData,
      }).then((res) => {
        console.log(res);
        if (res.data.retCode === "000001") {//根据接口状态码判断是否导入成功
          this.$Message.success("数据导入成功！");
        }else{
          this.$Message.error("数据导入失败！");
        }
      });
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: "文件 " + file.name + " 格式不正确，请上传.xls,.xlsx文件。",
      });
    },
  },
  mounted() {},
};
</script>

<style scoped>
.app {
  position: relative;
  width: 100%;
  max-width: 1920px;
  max-height: 1080px;
  background-size: 100% 100%;
  margin: auto;
  overflow: hidden;
}
</style>