baoman / Ezquiz_Platform

Blame view

src/components/upload.vue 2.24 KB
Edit Raw Normal View History
bb778c90   阿宝   设备状态 
1
2
 
  <template>
    <div>
db11048f   阿宝   设备状态，学校管理 
3
 
      <slot name="down"></slot>
530a37c8   梁保满   上传组件 
4
 
      <div class="d1">
530a37c8   梁保满   上传组件 
5
6
7
 
        <el-upload
          class="upload-demo"
          ref="upload"
db11048f   阿宝   设备状态，学校管理 
8
 
          :action="url"
530a37c8   梁保满   上传组件 
9
10
11
12
13
14
15
16
17
 
          :multiple="false"
          :data="{ id: id }"
          :with-credentials="true"
          :limit="1"
          :on-change="change"
          :on-success="upSuccess"
          :on-error="upError"
        >
          <!-- accept="application/vnd.ms-excel" -->
db11048f   阿宝   设备状态，学校管理 
18
19
20
21
22
23
 
          <div class="upload-btn">
            <i class="el-icon-upload"></i>
            <el-button class="btn" size="mini" type="primary"
              >选择文件并上传</el-button
            >
          </div>
530a37c8   梁保满   上传组件 
24
25
 
        </el-upload>
      </div>
bb778c90   阿宝   设备状态 
26
27
28
29
 
    </div>
  </template>
  
  <script>
bb778c90   阿宝   设备状态 
30
 
  export default {
530a37c8   梁保满   上传组件 
31
32
33
34
35
36
 
    name: "downUpData",
    props: {
      id: {
        type: String,
        default: "",
      },
db11048f   阿宝   设备状态，学校管理 
37
38
39
40
41
42
43
44
45
 
      url: {
        type: String,
        default: "",
      },
  
      fileName: {
        type: String,
        default: "模板",
      },
530a37c8   梁保满   上传组件 
46
47
48
49
50
51
52
53
54
 
    },
    data() {
      return {
        file: null,
      };
    },
    methods: {
      async submitUpload() {
        this.$refs.upload.submit();
bb778c90   阿宝   设备状态 
55
530a37c8   梁保满   上传组件 
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
 
        // const formData = new FormData()
        // formData.append('id',this.componentId)
        // formData.append('file',new File(this.file.raw))
        // let {status,info} = await uploadExcel(formData);
        // if(status===0){
        //   this.$message.success(info);
        //   this.$emit("upSuccess")
        // } else {
        //   this.$message.error(info);
        // }
      },
      upSuccess(res) {
        if (res && res.code == 0 && res.success) {
          this.$message.success("上传成功");
          this.$emit("upSuccess");
        } else {
          this.$message.error(res.message);
        }
      },
      upError(res) {
        if (res && res.status == 0) {
          this.$message.success("上传成功");
          this.$emit("upSuccess");
        } else {
          this.$message.error(res.message);
        }
      },
      change(file) {
        this.file = file;
      },
530a37c8   梁保满   上传组件 
86
87
 
    },
  };
bb778c90   阿宝   设备状态 
88
89
 
  </script>
530a37c8   梁保满   上传组件 
90
91
92
93
94
 
  <style lang="scss" scoped>
  .d1 {
    padding: 10px;
  }
  .btn {
530a37c8   梁保满   上传组件 
95
96
97
 
    border-radius: 8px;
    font-weight: normal;
  }
db11048f   阿宝   设备状态，学校管理 
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
 
  .upload-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-icon-upload {
      font-size: 48px;
      margin-bottom: 6px;
      color: #667ffd;
    }
  }
530a37c8   梁保满   上传组件 
113
 
  </style>