wuye / webui

Blame view

src/components/upload/uploadFile.vue 2.32 KB
Edit Raw Normal View History
6ec243d6   wuxw   v1.9 点击提交后，成功提示没有... 
1
 
  <template>
ce5e1a2a   wuxw   系统模块开发中 
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
 
    <div class="upload-file-wrapper">
      <div class="progress" v-if="progress > 0">
        <el-progress :percentage="progress" :stroke-width="2" />
      </div>
      <div class="file-name" v-if="fileName">
        {{ fileName }}
      </div>
      <el-upload
        class="upload-demo"
        action=""
        :auto-upload="false"
        :show-file-list="false"
        :on-change="handleFileChange"
      >
        <el-button size="small" type="primary">
          {{ $t('common.upload') }}
        </el-button>
      </el-upload>
    </div>
  </template>
  
  <script>
  import { uploadFile } from '@/api/system/paymentPoolApi'
  
  export default {
    name: 'UploadFile',
    props: {
      callBackListener: {
        type: String,
        default: ''
      },
      callBackFunction: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        progress: 0,
        fileName: '',
        realFileName: ''
      }
    },
    methods: {
      clear() {
        this.progress = 0
        this.fileName = ''
        this.realFileName = ''
      },
      handleFileChange(file) {
        if (file.size > 20 * 1024 * 1024) {
          this.$message.error(this.$t('uploadFile.sizeLimit'))
          return false
        }
        
        this.fileName = file.name
        this.doUpload(file.raw)
      },
      async doUpload(file) {
        const formData = new FormData()
        formData.append('uploadFile', file)
        
        try {
          const config = {
            onUploadProgress: progressEvent => {
              const percent = Math.round(
                (progressEvent.loaded * 100) / progressEvent.total
              )
              this.progress = percent < 90 ? percent : 90
            }
          }
18300670   wuxw   工作单功能处理中 
74
 
          const  data  = await uploadFile(formData, config)
ce5e1a2a   wuxw   系统模块开发中 
75
76
77
78
79
80
81
82
 
          this.progress = 100
          this.realFileName = data.realFileName
          this.$emit('notify', data)
          
          if (this.callBackListener && this.callBackFunction) {
            this.$emit(this.callBackFunction, data)
          }
6ec243d6   wuxw   v1.9 点击提交后，成功提示没有... 
83
 
          this.$message.success(this.$t('common.operationSuccess'))
ce5e1a2a   wuxw   系统模块开发中 
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
        } catch (error) {
          this.$message.error(this.$t('uploadFile.error'))
          console.error('上传文件失败:', error)
        }
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .upload-file-wrapper {
    .progress {
      margin-bottom: 10px;
    }
    
    .file-name {
      margin-bottom: 10px;
      font-size: 14px;
      color: #606266;
    }
  }
  </style>