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