long
2022-02-28 b350757df151c04f22d040eac001cb479d4a4776
提交 | 用户 | age
ccad61 1 <template>
C 2   <div>
3     <!-- 上传图片组件(多图) -->
4     <el-upload
30a172 5       id="UploadMultipleImg"
ccad61 6       ref="refUploadImg"
C 7       :accept="accept"
8       :auto-upload="false"
9       list-type="picture-card"
10       :class="{disabled:uploadDisabled}"
11       action="#"
12       :limit="limit"
30a172 13       drag
bf9798 14       multiple
ccad61 15       :file-list="uploadImgs"
C 16       :on-change="addUploadImg"
17       :on-remove="delUploadImg"
18       :http-request="uploadImg"
19       :on-preview="uploadPreview"
7e42b4 20       :on-exceed="exceedUploadImg"
ccad61 21       :before-upload="beforeUploadImg"
C 22       size="mini"
23     >
24       <i class="el-icon-plus" />
25     </el-upload>
26     <!-- upload放大图片 -->
27     <el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
28       <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
29     </el-dialog>
30   </div>
31 </template>
32
33 <script>
34 import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
35 export default {
36   mixins: [mixin_upload],
37   model: {
38     prop: 'uploadImgs',
39     event: 'change'
40   },
41   props: {
42     uploadImgs: {
43       type: Array,
44       default: () => {
45         return []
46       }
47     },
48     accept: {
49       type: String,
50       default: () => {
51         return 'image/jpeg,image/jpg,image/gif,image/png'
52       }
53     },
54     limit: {
55       type: Number,
56       default: 9
57     }
58   },
59
60   data() {
61     return {
62       callback: null
63     }
64   },
65   computed: {
66     uploadDisabled() {
67       return this.uploadImgs.length >= this.limit
68     }
69   },
70
71   methods: {
72     // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
73     // 上传前确认格式
74     beforeUploadImg(file) {
75       const isImg = file.type.indexOf('image/') > -1
76       const isTooLarge = file.size / 1024 / 1024 > 4
77       let flag = true
78       if (!isImg) {
79         this.$message.error('必须是选择图片文件')
80         flag = false
81       } else if (isTooLarge) {
82         this.$message.error('请勿上传大于4MB的图片')
83         flag = false
84       }
85       return flag
86     },
87     // 增加图片
88     addUploadImg(file, fileList) {
89       this.$emit('change', fileList)
90     },
91     // 删除图片
92     delUploadImg(file, fileList) {
93       this.$emit('change', fileList)
94     },
7e42b4 95     // 超出上传数量
L 96     exceedUploadImg(file, fileList) {
97       this.$messageError(`请勿上传超过${this.limit}张`)
98     },
ccad61 99     // 执行上传商品图
C 100     runUploadImg(suc_cb) {
101       console.log('runUploadImg!!!!!')
102       if (this.checkNeedUpload(this.uploadImgs)) {
103         this.callback = suc_cb
104         this.$refs.refUploadImg.submit()
105       } else {
d4d2d4 106         suc_cb && suc_cb(this.uploadImgs)
ccad61 107       }
C 108     },
109     // 上传商品图
110     uploadImg(res) {
111       console.log(res)
112       const file = res.file
113       const formData = new FormData()
114       formData.append('file', file)
115       console.log(formData)
116       this.postFN({
117         url: 'admin/image/upload?folderCode=IMG',
118         header: { 'Content-Type': 'multipart/form-data' },
119         params: formData,
120         mockData: {
121           code: 100,
122           msg: '',
123           data: {
124             imgUrl: 'xxxx'
125           }
126         }
127       }, (inf) => {
128         console.log('上传图片成功')
129
130         // 根据uid 替换掉未上传的图片
0e0365 131         var uploadImgs = JSON.parse(JSON.stringify(this.uploadImgs))
ccad61 132         uploadImgs.forEach((o, i) => {
74c210 133           if (o.uid === res.file.uid) {
L 134             uploadImgs[i].url = inf.imgUrl
135             uploadImgs[i].status = 'success'
136           }
ccad61 137         })
C 138
139         // 触发change时间激活v-model
140         this.$emit('change', uploadImgs)
141
142         console.log('上传图片结束')
143
144         // 上传结束
0e0365 145         if (!this.checkNeedUpload(uploadImgs)) {
ccad61 146           console.log('上传轮播图结束')
0e0365 147           this.callback && this.callback(uploadImgs)
ccad61 148         }
C 149       })
150     }
151     // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
152   }
153 }
154 </script>
155
156 <style>
157 .disabled .el-upload--picture-card {
158     display: none;
159 }
160 .el-upload-list--picture-card{
161   line-height: 1;
162 }
163 .el-upload-list--picture-card .el-upload-list__item{
164   margin-bottom: 0
165 }
30a172 166 #UploadMultipleImg .el-upload-dragger{
L 167   width: auto;
168   height: auto;
169 }
ccad61 170 </style>