vue-element上传组件，请求头加入token,上传格式判断_vue document.createelement("form") 请求头里加token-优快云博客

这个博客展示了如何使用Vue.js创建一个文件上传组件，该组件在上传前检查文件类型，支持Word、Excel、PDF等特定格式，并在上传成功或失败时提供反馈。通过`beforeAvatarUpload`方法进行文件格式验证，`handlesuccess`处理上传结果，确保了上传的安全性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
 <el-upload
      class="upload-demo"
      action="接口地址"
      :before-upload="beforeAvatarUpload"//上传前文件判断
      :on-success="handlesuccess"//上传成功调用
      :headers="headers"//请求头添加
    >
      <el-button type="primary" size="small">学员导入</el-button>
    </el-upload>
</template>

<script>
export default {
//给求头加入token值
  computed: {
    headers() {
      return {
        Authorization: 'token值'
      };
    }
  },
  methods:{
    beforeAvatarUpload(file) {
    console.log(file)
    //输出file可以看到上传的文件的相关信息，这里只写了格式的判断，还可以判断限制文件大小，方法相同
    //上传之前判断格式
       const type =
        file.type === "application/msword" ||
        file.type ===
          "application/vnd.openxmlformats-officedocument.wordprocessingml.document" ||
        file.type === "text/plain" ||
        file.type ===
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
        file.type === "application/vnd.ms-excel" ||
        file.type === "application/vnd.ms-powerpoint" ||
        file.type ===
          "application/vnd.openxmlformats-officedocument.presentationml.presentation" ||
        file.type === "application/pdf";

      if (!type) {
        this.$message.error("请上传正确的文件格式!");
      }
      return type;
    },
    //上传成功调用方法
    handlesuccess(file) {
      if (file.msg == "上传成功") {
      } else {
        this.$message.error("上传文件失败");
      }
    },
  }
 }