提交 | 用户 | 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> |