long
2021-09-09 30a1729ee64a237a547566f655fee1ce93827768
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
<template>
  <div class="upload_single_file">
    <!-- 上传文件组件(单) -->
    <el-upload
      ref="refUploadFile"
      :auto-upload="false"
      action="#"
      :limit="1"
      :file-list="uploadFiles"
      :on-change="addUploadFile"
      :on-remove="delUploadFile"
      :http-request="uploadFile"
      :before-upload="beforeUploadFile"
      size="mini"
    >
      <el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">上传文件</el-button>
    </el-upload>
  </div>
</template>
 
<script>
import mixin_upload from '@/mixins/upload.js' // 通用上传文件预览
export default {
  mixins: [mixin_upload],
  model: {
    prop: 'uploadFiles',
    event: 'change'
  },
  props: {
    uploadFiles: {
      type: Array,
      default: () => {
        return []
      }
    }
 
  },
 
  data() {
    return {
      callback: null
    }
  },
 
  methods: {
    // 上传文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前确认格式
    beforeUploadFile(file) {
      const isTooLarge = file.size / 1024 / 1024 > 50
      let flag = true
      if (isTooLarge) {
        this.$message.error('请勿上传大于50MB的文件')
        flag = false
      }
      return flag
    },
    // 增加文件
    addUploadFile(file, fileList) {
      this.$emit('change', fileList)
    },
    // 删除文件
    delUploadFile(file, fileList) {
      this.$emit('change', fileList)
    },
    // 执行上传商品图
    runUploadFile(suc_cb) {
      if (this.checkNeedUpload(this.uploadFiles)) {
        this.callback = suc_cb
        this.$refs.refUploadFile.submit()
      } else {
        suc_cb && suc_cb()
      }
    },
    // 上传文件
    uploadFile(res) {
      console.log(res)
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      this.postFN({
        url: 'admin/image/upload?folderCode=FILE',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            imgUrl: '上传文件成功'
          }
        }
      }, (inf) => {
        // 替换掉未上传的文件
        this.$emit('change', [{ name: '文件' + this.extname(inf.imgUrl), url: inf.imgUrl, status: 'success' }])
 
        console.log('上传文件成功且结束')
 
        // 提交
        // this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
        this.callback && this.callback(inf.imgUrl)
      })
    },
    // 获取文件后缀名
    extname(filename) {
      if (!filename || typeof filename !== 'string') {
        return ''
      }
      const a = filename.split('').reverse().join('')
      const b = a.substring(0, a.search(/\./)).split('').reverse().join('')
      return b
    }
    // 上传文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
  }
}
</script>
 
<style>
.upload_single_file .el-upload-list__item-name{
  padding: 5px!important;
}
</style>