1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<template>
  <!--
  directory 开启目录
  -->
  <el-upload v-if="display"
    ref="uploadRef"
    :before-upload="handleBeforeUpload"
    :directory="true"
    :disabled="disabled"
    :headers="uploadHeaders"
    :on-change="handleFileChange"
    :on-error="onError"
    :on-success="onSuccess"
    :show-file-list="false"
    action="https://jsonplaceholder.typicode.com/posts/"
    class="upload-demo"
    :accept="fileAccpet"
    drag
    multiple>
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或
      <el-link type="primary" @click="UploadSingleFile">上传单文件</el-link> &nbsp;
      <el-link type="success" @click="UploadFolder">上传文件夹</el-link>
    </div>
  </el-upload>
</template>
 
<script>
import {getToken} from "@/util/auth";
import func from "@/util/func";
 
export default {
  name: "formUpload",
  // props:{
  //   fileAccpet:String,
  //   defalut:'.img,.xls,.png,.xlsx'
  // },
  props: {
    disabled:{
      type:Boolean,
      default:false
    },
    display:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      pageLoading: null,
      fileAccpet:'.img,.xls,.png,.xlsx'
    }
  },
  computed: {
    uploadHeaders() {
      return {
        "Blade-Auth": "bearer " + getToken(),
      };
    },
  },
  methods: {
    //上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    handleBeforeUpload(file) {
      console.log(file)
      if(!file.type){
        this.$message.error('不支持拖拽上传文件夹，请手动选择文件夹上传！')
        return
      }
      const fileList = this.fileAccpet.split(',');
      const fileType = file.name.split(".").pop();
      // fileList.forEach(res => {
      //   if (fileType !== res) {
      //     // this.$message.error(`不支持上传${res}文件，请重新配置！`)
      //     messageList.push(fileType)
      //     return Promise.reject(false);
      //   }
      // });
      if(!fileList.includes(fileType)){
        this.$message.error(`不支持上传${fileType}，请重新配置！`)
        return Promise.reject(false);
      }
 
      this.pageLoading = this.$loading({
        lock: true,
        text: "文件上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      return true;
    },
    //文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleFileChange(file) {
      if (file.status === "success" || file.status === "error") {
        this.pageLoading.close();
      }
      // this.$refs.uploadRef.clearFiles()
    },
    //失败
    onError(error) {
      this.pageLoading.close();
    },
    //成功
    onSuccess(response) {
      if (Object.keys(response.data).length === 0) {
        this.$message.success("上传成功！");
        this.dialogVisible = false;
        return;
      }
    },
    //上传单文件
    UploadSingleFile() {
      this.$refs.uploadRef.$children[0].$refs.input.webkitdirectory = false;
    },
    //上传文件夹
    UploadFolder() {
      this.$refs.uploadRef.$children[0].$refs.input.webkitdirectory = true;
    }
  },
};
</script>
 
<style scoped>
 
</style>