vue-element上传组件，请求头加入token,上传格式判断

Vue.js组件：文件上传与格式检查

最新推荐文章于 2023-09-26 12:10:56 发布

原创最新推荐文章于 2023-09-26 12:10:56 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #elementui

vue-element 专栏收录该内容

16 篇文章

订阅专栏

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

<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("上传文件失败");
      }
    },
  }
 }