long
2022-01-10 74c2102f5fdbbc2b57dd65ffdd05a9fa19e74ee6
提交 | 用户 | age
92f93f 1 <template>
347623 2   <div class="upload_single_file">
92f93f 3     <!-- 上传文件组件(单) -->
L 4     <el-upload
5       ref="refUploadFile"
6       :auto-upload="false"
7       action="#"
8       :limit="1"
9       :file-list="uploadFiles"
10       :on-change="addUploadFile"
11       :on-remove="delUploadFile"
12       :http-request="uploadFile"
13       :before-upload="beforeUploadFile"
14       size="mini"
15     >
16       <el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">上传文件</el-button>
17     </el-upload>
18   </div>
19 </template>
20
21 <script>
22 import mixin_upload from '@/mixins/upload.js' // 通用上传文件预览
23 export default {
24   mixins: [mixin_upload],
25   model: {
26     prop: 'uploadFiles',
27     event: 'change'
28   },
29   props: {
30     uploadFiles: {
31       type: Array,
32       default: () => {
33         return []
34       }
35     }
36
37   },
38
39   data() {
40     return {
41       callback: null
42     }
43   },
44
45   methods: {
46     // 上传文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
47     // 上传前确认格式
48     beforeUploadFile(file) {
49       const isTooLarge = file.size / 1024 / 1024 > 50
50       let flag = true
51       if (isTooLarge) {
52         this.$message.error('请勿上传大于50MB的文件')
53         flag = false
54       }
55       return flag
56     },
57     // 增加文件
58     addUploadFile(file, fileList) {
59       this.$emit('change', fileList)
60     },
61     // 删除文件
62     delUploadFile(file, fileList) {
63       this.$emit('change', fileList)
64     },
65     // 执行上传商品图
66     runUploadFile(suc_cb) {
67       if (this.checkNeedUpload(this.uploadFiles)) {
68         this.callback = suc_cb
69         this.$refs.refUploadFile.submit()
70       } else {
71         suc_cb && suc_cb()
72       }
73     },
74     // 上传文件
75     uploadFile(res) {
76       console.log(res)
77       const file = res.file
78       const formData = new FormData()
79       formData.append('file', file)
80       this.postFN({
08ad52 81         url: 'admin/image/upload?folderCode=FILE',
92f93f 82         header: { 'Content-Type': 'multipart/form-data' },
L 83         params: formData,
84         mockData: {
85           code: 100,
86           msg: '',
87           data: {
2d9354 88             imgUrl: '上传文件成功'
92f93f 89           }
L 90         }
91       }, (inf) => {
92         // 替换掉未上传的文件
2d9354 93         this.$emit('change', [{ name: '文件' + this.extname(inf.imgUrl), url: inf.imgUrl, status: 'success' }])
92f93f 94
L 95         console.log('上传文件成功且结束')
96
97         // 提交
2d9354 98         // this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
L 99         this.callback && this.callback(inf.imgUrl)
92f93f 100       })
L 101     },
102     // 获取文件后缀名
103     extname(filename) {
104       if (!filename || typeof filename !== 'string') {
105         return ''
106       }
107       const a = filename.split('').reverse().join('')
108       const b = a.substring(0, a.search(/\./)).split('').reverse().join('')
109       return b
110     }
111     // 上传文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
112   }
113 }
114 </script>
347623 115
L 116 <style>
117 .upload_single_file .el-upload-list__item-name{
118   padding: 5px!important;
119 }
120 </style>