@keyblade/pro-components 1.12.1-alpha.11 → 1.12.1-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/index.d.ts +0 -1
- package/es/index.js +19 -23
- package/es/pro-image-upload/image-upload.vue.d.ts +1 -538
- package/es/pro-image-upload/image-upload.vue.js +5 -247
- package/es/pro-image-upload/index.d.ts +4 -1344
- package/es/style.css +1 -1
- package/package.json +1 -1
- package/es/pro-image-upload/constant.js +0 -15
- package/es/pro-image-upload/types.js +0 -4
|
@@ -1,252 +1,10 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
|
|
3
|
-
import { conclude as b } from "vue-global-config";
|
|
4
|
-
import { EImageUploadInnerBeforeUploadStep as v } from "./types.js";
|
|
5
|
-
import { defaultImageUploadOptions as x } from "./constant.js";
|
|
6
|
-
import { defaultImageUploadCheckOptions as de, defaultImageUploadCompressorOptions as se, defaultImageUploadCropOptions as ce, oneTravelImageCheckAndTransform as fe, oneTravelImageCompressor as ve } from "@keyblade/one-travel";
|
|
7
|
-
const me = "keyblade-pro-image-upload";
|
|
8
|
-
var G, J, K;
|
|
9
|
-
const Ee = /* @__PURE__ */ ne({
|
|
1
|
+
import { defineComponent as e, openBlock as o, createElementBlock as t } from "vue";
|
|
2
|
+
const p = /* @__PURE__ */ e({
|
|
10
3
|
__name: "image-upload",
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
handlerResponse: {},
|
|
14
|
-
headers: {},
|
|
15
|
-
data: {},
|
|
16
|
-
name: { default: (G = x) == null ? void 0 : G.name },
|
|
17
|
-
tip: {},
|
|
18
|
-
accept: { default: () => {
|
|
19
|
-
var B;
|
|
20
|
-
return ((B = x) == null ? void 0 : B.accept) || [];
|
|
21
|
-
} },
|
|
22
|
-
multiple: { type: Boolean, default: x.multiple },
|
|
23
|
-
singleLimit: { default: x.singleLimit },
|
|
24
|
-
limit: {},
|
|
25
|
-
disabled: { type: Boolean, default: (J = x) == null ? void 0 : J.disabled },
|
|
26
|
-
hideInnerBeforeUploadLoading: { type: Boolean, default: (K = x) == null ? void 0 : K.hideInnerBeforeUploadLoading },
|
|
27
|
-
checkOptions: {},
|
|
28
|
-
compressorOptions: {},
|
|
29
|
-
cropOptions: {},
|
|
30
|
-
onSuccess: {},
|
|
31
|
-
onError: {},
|
|
32
|
-
onExceed: {},
|
|
33
|
-
onBeforeUpload: {},
|
|
34
|
-
onInnerBeforeUploadStart: {},
|
|
35
|
-
onInnerBeforeUploadEnd: {}
|
|
36
|
-
},
|
|
37
|
-
emits: ["cropperImgLoad"],
|
|
38
|
-
setup(B, { expose: X, emit: ge }) {
|
|
39
|
-
const e = B, i = defineModel({ required: !0 }), M = m(), Y = m(), O = m(), g = m(
|
|
40
|
-
[]
|
|
41
|
-
), o = m(), c = m(), d = m(), Z = C(() => e.accept.map((a) => `.${a}`).join(",")), f = C(() => b([e.checkOptions, de]) || {}), p = C(() => b([e.compressorOptions, se]) || {}), y = C(() => b([e.cropOptions, ce]) || {}), _ = (a) => {
|
|
42
|
-
var t, u, s, r;
|
|
43
|
-
const n = (r = (s = (u = (t = M.value) == null ? void 0 : t.$el) == null ? void 0 : u.querySelector) == null ? void 0 : s.call(u, "input")) == null ? void 0 : r.files;
|
|
44
|
-
return n && n.length > 0 && (d.value = {
|
|
45
|
-
selectCount: n.length
|
|
46
|
-
}), e != null && e.onBeforeUpload ? e == null ? void 0 : e.onBeforeUpload(a) : d.value && (e != null && e.singleLimit) && d.value.selectCount > (e == null ? void 0 : e.singleLimit) ? (d.value.handleIndex === void 0 ? (d.value.handleIndex = 0, U.error(`单次最多可选择${e == null ? void 0 : e.singleLimit}张图片`)) : d.value.handleIndex += 1, d.value.handleIndex === d.value.selectCount - 1 && (d.value = void 0), !1) : new Promise(async (E, w) => {
|
|
47
|
-
try {
|
|
48
|
-
E(await le(a));
|
|
49
|
-
} catch {
|
|
50
|
-
w();
|
|
51
|
-
} finally {
|
|
52
|
-
L();
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
}, A = async (a) => {
|
|
56
|
-
const n = i.value.findIndex((t) => t.uid === a.uid);
|
|
57
|
-
return i.value.splice(n, 1), i.value = [...i.value], !1;
|
|
58
|
-
}, R = (a, n) => {
|
|
59
|
-
e != null && e.onExceed ? e == null || e.onExceed(a, n) : (U.error(`单次最多可选择${(e == null ? void 0 : e.limit) || 1}张图片`), i.value = a);
|
|
60
|
-
}, ee = async (a) => {
|
|
61
|
-
if (e != null && e.onSuccess)
|
|
62
|
-
e == null || e.onSuccess(a);
|
|
63
|
-
else {
|
|
64
|
-
if (!(e != null && e.handlerResponse))
|
|
65
|
-
return;
|
|
66
|
-
const n = await e.handlerResponse(a.response), t = i.value.findIndex((u) => u.uid === a.uid);
|
|
67
|
-
n.success ? i.value[t] = {
|
|
68
|
-
...i.value[t],
|
|
69
|
-
...n
|
|
70
|
-
} : i.value.splice(t, 1);
|
|
71
|
-
}
|
|
72
|
-
}, ae = (a) => {
|
|
73
|
-
e != null && e.onError ? e == null || e.onError(a) : setTimeout(() => {
|
|
74
|
-
const n = i.value.findIndex((t) => t.uid === a.uid);
|
|
75
|
-
i.value.splice(n, 1);
|
|
76
|
-
});
|
|
77
|
-
}, le = (a) => new Promise((n, t) => {
|
|
78
|
-
g.value.push({ file: a, resolve: n, reject: t }), g.value.length === 1 && !o.value && L();
|
|
79
|
-
}), L = () => {
|
|
80
|
-
o.value === void 0 ? o.value = 0 : o.value + 1 >= g.value.length ? (o.value = void 0, g.value = []) : o.value += 1;
|
|
81
|
-
};
|
|
82
|
-
D(o, async () => {
|
|
83
|
-
var E, w, S, $, F, z, j, k, Q, H, W, P, T, q, N, V;
|
|
84
|
-
if (o.value === void 0 || g.value.length === 0)
|
|
85
|
-
return;
|
|
86
|
-
const a = g.value[o.value], { file: n, resolve: t, reject: u } = a;
|
|
87
|
-
let s = n.name, r = n;
|
|
88
|
-
if ((E = f.value) != null && E.enable) {
|
|
89
|
-
c.value = {
|
|
90
|
-
loading: !0,
|
|
91
|
-
text: `第${o.value + 1}张图片检测中,请稍等`
|
|
92
|
-
}, (w = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || w.call(
|
|
93
|
-
e,
|
|
94
|
-
n,
|
|
95
|
-
o.value,
|
|
96
|
-
v.check
|
|
97
|
-
);
|
|
98
|
-
const l = await fe(n, n.name, {
|
|
99
|
-
imageMaxSize: f.value.maxSize,
|
|
100
|
-
imageAllowedType: f.value.allowedType,
|
|
101
|
-
imageMinWidth: f.value.minWidth,
|
|
102
|
-
imageMinHeight: f.value.minHeight,
|
|
103
|
-
imageMaxWidth: f.value.maxWidth,
|
|
104
|
-
imageMaxHeight: f.value.maxHeight
|
|
105
|
-
});
|
|
106
|
-
if (c.value = void 0, (S = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || S.call(
|
|
107
|
-
e,
|
|
108
|
-
n,
|
|
109
|
-
o.value,
|
|
110
|
-
v.check,
|
|
111
|
-
{
|
|
112
|
-
success: l.success,
|
|
113
|
-
error: l == null ? void 0 : l.error,
|
|
114
|
-
errorMessage: l == null ? void 0 : l.errorMessage
|
|
115
|
-
}
|
|
116
|
-
), !l.success)
|
|
117
|
-
return ($ = f.value) != null && $.showErrorMessage && U.error((l == null ? void 0 : l.errorMessage) || "图片校验及转换失败"), u();
|
|
118
|
-
if (l != null && l.hasTransform) {
|
|
119
|
-
const I = s == null ? void 0 : s.split(".");
|
|
120
|
-
I.pop(), s = `${I.join(",")}.jpg`, r = new File([l.file], s, {
|
|
121
|
-
type: l.file.type
|
|
122
|
-
});
|
|
123
|
-
} else
|
|
124
|
-
r = l.file;
|
|
125
|
-
}
|
|
126
|
-
if ((F = y.value) != null && F.enable) {
|
|
127
|
-
(z = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || z.call(
|
|
128
|
-
e,
|
|
129
|
-
n,
|
|
130
|
-
o.value,
|
|
131
|
-
v.crop
|
|
132
|
-
);
|
|
133
|
-
try {
|
|
134
|
-
(j = y.value) != null && j.customCrop ? r = await y.value.customCrop(r) : r = await new Promise((l, I) => {
|
|
135
|
-
O.value = { file: r, resolve: l, reject: I };
|
|
136
|
-
}), (k = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || k.call(
|
|
137
|
-
e,
|
|
138
|
-
n,
|
|
139
|
-
o.value,
|
|
140
|
-
v.crop,
|
|
141
|
-
{
|
|
142
|
-
success: !1
|
|
143
|
-
}
|
|
144
|
-
);
|
|
145
|
-
} catch {
|
|
146
|
-
return (Q = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || Q.call(
|
|
147
|
-
e,
|
|
148
|
-
n,
|
|
149
|
-
o.value,
|
|
150
|
-
v.crop,
|
|
151
|
-
{
|
|
152
|
-
success: !1,
|
|
153
|
-
error: {
|
|
154
|
-
crop: !0
|
|
155
|
-
},
|
|
156
|
-
errorMessage: "图片剪裁失败"
|
|
157
|
-
}
|
|
158
|
-
), (H = y.value) != null && H.showErrorMessage && U.error("图片剪裁失败"), u();
|
|
159
|
-
} finally {
|
|
160
|
-
O.value = void 0;
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
if ((W = p.value) != null && W.enable) {
|
|
164
|
-
c.value = {
|
|
165
|
-
loading: !0,
|
|
166
|
-
text: `第${o.value + 1}张图片处理中,请稍等`
|
|
167
|
-
}, (P = e == null ? void 0 : e.onInnerBeforeUploadStart) == null || P.call(
|
|
168
|
-
e,
|
|
169
|
-
n,
|
|
170
|
-
o.value,
|
|
171
|
-
v.compress
|
|
172
|
-
);
|
|
173
|
-
const l = await ve(r, {
|
|
174
|
-
maxSize: p.value.maxSize,
|
|
175
|
-
size: p.value.size,
|
|
176
|
-
excludeAllowedTypes: (T = p.value.excludeAllowedTypes) == null ? void 0 : T.map((I) => `image/${I}`)
|
|
177
|
-
});
|
|
178
|
-
if (c.value = void 0, (q = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || q.call(
|
|
179
|
-
e,
|
|
180
|
-
n,
|
|
181
|
-
o.value,
|
|
182
|
-
v.compress,
|
|
183
|
-
{
|
|
184
|
-
success: l.success,
|
|
185
|
-
error: {
|
|
186
|
-
compress: !0
|
|
187
|
-
},
|
|
188
|
-
errorMessage: l == null ? void 0 : l.errorMessage
|
|
189
|
-
}
|
|
190
|
-
), !l.success)
|
|
191
|
-
return (N = p.value) != null && N.showErrorMessage && U.error((l == null ? void 0 : l.errorMessage) || "图片压缩失败"), u();
|
|
192
|
-
r = new File([l.file], s, {
|
|
193
|
-
type: l.file.type
|
|
194
|
-
});
|
|
195
|
-
}
|
|
196
|
-
c.value = void 0, (V = e == null ? void 0 : e.onInnerBeforeUploadEnd) == null || V.call(
|
|
197
|
-
e,
|
|
198
|
-
n,
|
|
199
|
-
o.value,
|
|
200
|
-
v.all,
|
|
201
|
-
{
|
|
202
|
-
success: !0
|
|
203
|
-
}
|
|
204
|
-
), t(r);
|
|
205
|
-
});
|
|
206
|
-
let h;
|
|
207
|
-
return D(
|
|
208
|
-
() => c.value,
|
|
209
|
-
() => {
|
|
210
|
-
var a;
|
|
211
|
-
c.value ? h = U.loading({
|
|
212
|
-
content: c.value.text,
|
|
213
|
-
id: "image-upload-id",
|
|
214
|
-
duration: 0
|
|
215
|
-
}) : (a = h == null ? void 0 : h.close) == null || a.call(h);
|
|
216
|
-
}
|
|
217
|
-
), X({
|
|
218
|
-
uploadInsRef: M,
|
|
219
|
-
cropperInsRef: Y
|
|
220
|
-
}), (a, n) => {
|
|
221
|
-
const t = oe("a-upload");
|
|
222
|
-
return te(), ie("div", null, [
|
|
223
|
-
ue(t, {
|
|
224
|
-
class: re([`${me}-upload`]),
|
|
225
|
-
ref_key: "uploadInsRef",
|
|
226
|
-
ref: M,
|
|
227
|
-
"list-type": "picture-card",
|
|
228
|
-
tip: a.tip || "上传",
|
|
229
|
-
"image-preview": "",
|
|
230
|
-
"file-list": i.value,
|
|
231
|
-
"onUpdate:fileList": n[0] || (n[0] = (u) => i.value = u),
|
|
232
|
-
action: a.action,
|
|
233
|
-
headers: a.headers,
|
|
234
|
-
data: a.data,
|
|
235
|
-
name: a.name,
|
|
236
|
-
accept: Z.value,
|
|
237
|
-
multiple: a.multiple,
|
|
238
|
-
limit: a.limit,
|
|
239
|
-
disabled: a.disabled,
|
|
240
|
-
"on-before-upload": _,
|
|
241
|
-
"on-before-remove": A,
|
|
242
|
-
onExceedLimit: R,
|
|
243
|
-
onSuccess: ee,
|
|
244
|
-
onError: ae
|
|
245
|
-
}, null, 8, ["class", "tip", "file-list", "action", "headers", "data", "name", "accept", "multiple", "limit", "disabled"])
|
|
246
|
-
]);
|
|
247
|
-
};
|
|
4
|
+
setup(n) {
|
|
5
|
+
return (r, a) => (o(), t("div"));
|
|
248
6
|
}
|
|
249
7
|
});
|
|
250
8
|
export {
|
|
251
|
-
|
|
9
|
+
p as default
|
|
252
10
|
};
|